JSFiddle - React, Tailwind, and code Playground

HTML

<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',
            stop: function(event, ui) {
        	alert(ui.item[0].class);
        }
}).disableSelection();

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