JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

// Case A: Move within the same list
// Case B: Move from one list to another

$(function() {
    $('.sortable').sortable({
        stop: function(event, ui) {
            // Called in case A and B (!!sender == false in both)
            if(!ui.sender) alert("sender not set");
            else alert("sender is set");
        },
        receive: function(event, ui) {
            // Called only in case B (with !!sender == true)
            alert("Moved from another list");
        },
        connectWith: ".sortable",
        appendTo: 'body',
    }).disableSelection();
});