JSFiddle - React, Tailwind, and code Playground

by petersendidit

HTML

<ul id="sortable1" class="connectedSortable ui-helper-reset">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable ui-helper-reset">
    <li class="ui-state-highlight">Item 1</li>
    <li class="ui-state-highlight">Item 2</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
</ul>

<div id="trash">trash</div>

CSS

#sortable1, #sortable2{
margin: 0 0 30px 0;           
}
#sortable1 li, #sortable2 li { 
    margin: 0 5px 5px 5px; 
    padding: 5px; 
    font-size: 1.2em; 
    width: 120px; 
    border: 1px solid black;
    background: #FFF;
}

#trash {
    height: 140px;
    width: 140px;
    border: 1px solid red; 
}
#trash.ui-state-hover{
    background: red;
}

JavaScript

$("#sortable1, #sortable2").sortable({
    connectWith: '.connectedSortable, #trash'
}).disableSelection();

$("#trash").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(ev, ui) {
        ui.draggable.remove();
    }
});