JSFiddle - React, Tailwind, and code Playground

by Aras Balali Moghaddam

HTML

<div id="wrap">
    <div id="droppable"></div>
    <div id="draggableList" class="dragSort">
        <div class="draggable">A</div>
        <div class="draggable">B</div>
        <div class="draggable">C</div>
        <div class="draggable">D</div>
        <div class="draggable">E</div>
        
    </div>
</div>

CSS

#wrap{
    width:350px;
    height:300px;
    position:absolute;
}
.dragged, .draggable{
    float:left;
    width:50px;
    height:50px;
    
    background:#F9F;
    margin:5px;
}
#droppable{
    width:350px;
    height:200px;
    background:#999;
    position:relative;
    top:0;
    left:0;
}
#draggableList{
    width:350px;
    height:100px;
    clear:both;
    display:block;
    position:relative;
}

JavaScript

$('#draggableList').sortable({
    receive: function(event, ui) {
        var item = $('.ui-draggable-dragging');
        item.removeAttr("style");
        item.removeAttr('class');
        item.addClass('draggable');
    }
});
var $tab_items = $("#droppable").droppable({
    //accept: ".draggable",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        var item = $(this);
  
        var olditem = $(".draggable.ui-sortable-helper").clone();
        if (olditem[0] != null) {
            olditem.removeAttr('class');
            olditem.addClass('dragged');

            olditem.css({
                'position': 'absollute',
                'top': ui.offset.top,
                'left': ui.offset.left
            });
            olditem.draggable({
                connectToSortable: "#draggableList",
                helper: "original",
                revert: 'invalid'
            });
            
            ui.draggable.remove();
            $('#droppable').append(olditem).show("slow");
        }

    },
    out: function(event, ui) {}
});