JSFiddle - React, Tailwind, and code Playground

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

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

$(function() {

    $('#sort1').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");
            event.preventDefault();
        },
        connectWith: ".sortable",
        appendTo: 'body'
    }).disableSelection();
    $('#sort2').sortable({
        stop: function(event, ui) {
                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");
            event.preventDefault();
        },
        connectWith: ".sortable",
        appendTo: 'body'
    }).disableSelection();

});