JSFiddle - React, Tailwind, and code Playground

by Bryan Weaver

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<ul id="sortable1" class="connectedSortable">
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
    <li id="a">a</li>
    <li id="b">b</li>
    <li id="c">c</li>
</ul>

<ul id="sortable2" class="connectedSortable"></ul>

CSS

ul { list-style: none; }
li { cursor: pointer; }

.connectedSortable {
    border: 1px solid;
    padding: 10px;
}

.connectedSortable.new { border: 1px dashed; }

.hidden { display: none; }

JavaScript

$(function () {

    initSort($('.connectedSortable'));

});

function initSort(element) {

    element.sortable({
        connectWith: '.connectedSortable',
        beforeStop: function (event, ui) {
            var parent = ui.helper.parent();
            cleanUp();
        }
    }).disableSelection();

}

function cleanUp() {

    $('.connectedSortable').each(function () {
        if ($(this).find('li').length == 0) {
            $(this).remove();
        }
    });

}