JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dragParent">
    <li class="item">drag 1</li>
    <li class="item">drag 2</li>
</ul>
<ul class="sortable">
    <li class="item">sort 1</li>
    <li class="item">sort 2</li>
</ul>
<ul class="droppable">
    <li class="item">drop 1</li>
    <li class="item">drop 2</li>
</ul>

CSS

.dragParent { border: 1px solid green; }
.sortable { border: 1px solid blue; }
.droppable { border: 1px solid red; }
.item { background-color: #eee; }

JavaScript

$(function() {
    $(".dragParent .item").draggable({
        connectWithSortable: ".sortable"
    });
    $(".sortable").sortable({
        items: ".item",
        receive: function() { alert("received!"); },
    });
    $(".droppable").droppable({
        accept: ".item"
    });
});