JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="container">
<div class="draggable">
    <div class="draggable">
        Drag Me
    </div>
</div> 
<div class="drop">
    <div class="slot">
        <p>Slot1</p>
    </div>
    <div class="slot">
        <p>Slot2</p>
    </div>
    <div class="slot">
        <p>Slot3</p>
    </div>
</div>
    </div>

CSS

.slot{
    border:1px solid;
    z-index:9999;
}


.draggable{
    border:1px solid;
}

JavaScript

$(function(){
    $(".draggable").draggable({
                       
                        drag: function (event, ui) {
                            $(ui.helper).height(10);


                        }
                    });
   
    $(".slot").droppable({
        accept: ".draggable",
        tolerance:"pointer",
        drop: function (event, ui) {
            var dropped = ui.draggable;
            var droppedOn = this;
            $(dropped).detach().css({ top: 0, left: 0 });
            $(droppedOn).before($(dropped));
            //$(dropped).append("<h5></h5>");
           // $(dropped).find('h5').text("hello test");
        }
    });
    
   
    
    
})