JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<ul>
    <li class="item">A</li>
    <li class="item">B</li>
    <li class="item">C</li>
    <li class="item disabled">X1</li>
</ul>

JavaScript

$(function() {
    var index;
    $("ul").sortable({
        start: function(event, ui){
            index = $(event.target).index();
        },
        cancel: ".disabled",
        change: function(event, ui) {
            var itemToMove = ui.helper.prev(".item");
            var itemToMove2 = ui.placeholder.prev(".item");
            
            //Sometimes the placeholder is in the right place 
            //and other times it is the helper that is in the right place
            if (itemToMove.hasClass("disabled")) {
                moveItem(itemToMove, index);
            }
            else if (itemToMove2.hasClass("disabled")) {
                moveItem(itemToMove2, index);
            }
        }
    });
    
    function moveItem(itemToMove, index){
        //This determins if we are sorting up or down
        var delta = 1;
        if(itemToMove.index() < index){
            delta = -1;
        }
        
        //This makes sure we don't hit any index out of bounds craziness
        if(index === 0){
            $("ul").children().eq(index+delta).before(itemToMove);
        }
        else if(index === $("ul").children().length) {
            $("ul").append(itemToMove2);
        }
        else {
            $("ul").children().eq(index-delta).after(itemToMove);
        }
    }
});