JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">
<div class="demo">
    
    <ul id="sortable1" class="connectedSortable">
        <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">
        <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><!-- End demo -->

<div class="demo-description">
    <p width="300">
        Sort items from one list to the other or within the same list by dragging and dropping. In addition, if you drop an item on another while coming in
        from above, the dropped item will become a sub-item; but sometimes the subitem gets stuck when it's from the other list, to unstick it, just drag the group
        to the other list set and it will once again be sortable - I'm not sure why this is happening.
    </p>
</div><!-- End demo-description -->

CSS

.demo-description { width: 500px; clear: both; }
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
#sortable1 li ul, #sortable2 li ul { list-style-type: none; margin: 0; padding: 0 0 0 5px; }
#sortable1 ul li, #sortable2 ul li { width: 90px; font-size: 1em; }

JavaScript

$(function() {
    var phTop, container, indx;
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable',
        beforeStop: function(e,ui){
            phTop = ui.placeholder.position().top;
            container = ui.placeholder.parent();
            indx = ui.placeholder.index();
        },
        stop: function(e,ui){
            var list = container.find('> li').eq(indx);
            // 15 is a pixel tolerance between the two items (dragging in from the top)
            if ( Math.abs( phTop - ui.position.top ) < 15 ) {
                // prevent list depth > 1
                if (ui.item.find('li').length > 0) { return; }
                // add ul inside of li to make subgroup
                if (!list.find('ul').length) { list.append('<ul></ul>'); }
                ui.item.appendTo( list.find('> ul') );
            }
            container.find('li > ul:empty').remove(); // remove empty subgroups
        }
    }).disableSelection();
});