JSFiddle - React, Tailwind, and code Playground

by lparcerisa

HTML

<div>
    <div class="inner1" id="sortable">
        <div class="inner" id="a"> a </div>
        <div class="inner"> b</div>
        <div class="inner"> c</div>
        <div class="inner"> d</div>
    </div>
    <div class="inner1" id="draggable"> -----&gt; </div>
    <div class="inner1" id="droppable">
        
    </div>
</div>

CSS

#sortable{
    border : 1px solid;width:250px; height:250px;list-style:none;   
}
.inner{ /*use display:inline-block; instead of float: left ; wont work well*/
    width:100px; height:100px;border:2px solid;float:left;margin:10px;
    background:#48A4F0;border-top-left-radius: 50px;  
}
#draggable{
    width:50px;height:50px;border:1px solid;
}
.inner1{
    float:left;margin:10px;
}
#droppable{
     border : 1px solid;width:250px; height:250px;
}

JavaScript

$(document).ready(function(){
    $("#sortable").sortable({
        revert:true
    });
    $("#draggable").parent().draggable();
    $("#droppable").droppable({
        drop:function(e,ui){
            if($(ui.draggable).parent().attr("id")!=$(this).attr("id")){
               var clone = $(ui.draggable).clone();
                clone.removeAttr("style");
                clone.appendTo($(this));
                $(ui.draggable).remove(); // Remove original element
            }
        },
        revert:true
    });
     $("#droppable").sortable();
});