JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<ul id="sortable">
    
    <li>oranges</li>
    <li class="static" id="static-1">apples</li>
    <li>bananas</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li class="static" id="static-5">pears</li>
    <li>mango</li>
</ul>

<script type="text/javascript">
    $('#fruit').sortable({items: "li:not('.fixed')"})
</script>

CSS

ul > li {display:block;height:15px;width:100px;background:#ccc;margin:2px;padding:3px;border:1px solid #aaa;}

JavaScript

$("#sortable").sortable({
    "cancel":"li.static",
    "change":function(event,ui) {
        var locktos = [1, 5];
       for(i=0;i<locktos.length;i++) {
            var thisindex = $(ui.helper).index(fixed);         
            var fixed = $("#static-"+locktos[i]);           
            var index = $("#sortable li").index(fixed);
            var targetindex = locktos[i]+1;
            if(index !== targetindex) {         
                if(index > targetindex ) {
                    fixed.prev().insertAfter(fixed); //move it up by one position
                } else if(index==(targetindex-1) && thisindex>targetindex) {
                    //don't move it at all
                } else {
                    fixed.next().insertBefore(fixed); //move it down by one position
                }
            } else if(index==targetindex && thisindex>targetindex) {
                fixed.prev().insertAfter(fixed); //move it up by one position
            }  
    }
    }
});