JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <ol class="sortable">
        <li id="1">Element 1</li>
        <li id="2">Element 2</li>
        <li id="3">Element 3</li>
    </ol>
    
    <ol class="sortable">
        <li id="c1">Connected element 1</li>
        <li id="c2">Connected element 2</li>
        <li id="c3">Connected element 3</li>
    </ol>
</html>

JavaScript

$(function() {
    position_updated = false; //helper flag for sortable below
    
    $(".sortable").sortable({
        connectWith: ".sortable",
        update: function(event, ui) {
            position_updated = !ui.sender; //if no sender, set sortWithin flag to true
        },
        stop: function(event, ui) {
            if (position_updated) {
                processSortWithin(ui.item.attr("id"), ui.item.index());
                position_updated = false;
            }
        },
        receive: function(event, ui) {
            processSortBetween(ui.item.attr("id"), ui.item.index(),ui.sender.attr("id"));
        }
    }).disableSelection();
});

function processSortWithin(id, position) {
    alert("sort within");
}

function processSortBetween(id, position, sender_id) {
    alert("sort between");
}