JSFiddle - React, Tailwind, and code Playground

by kaleeswaran

HTML

<div id="list-A">
    <ul id='sort1' class="sortable">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>
<br />
<div id="list-B">
    <ul id='sort2' class="sortable">
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
    </ul>
</div>

JavaScript

$(function() {
        var oldList, newList, item;
        $('.sortable').sortable({
            start: function(event, ui) {
                item = ui.item;
                newList = oldList = ui.item.parent().parent();
            },
            stop: function(event, ui) {          
                alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id'));
            },
            change: function(event, ui) {  
                if(ui.sender) newList = ui.placeholder.parent().parent();
            },
            connectWith: ".sortable"
        }).disableSelection();
    });