JSFiddle - React, Tailwind, and code Playground

by thomas4g

HTML

<ul id="sortable">
    
    <li>oranges</li>
    <li class="static">apples</li>
    <li>bananas</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li class="static">pears</li>
    <li>mango</li>
</ul>

CSS

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

.static { color:red; }

JavaScript

$(document).ready(function() {
    $("#sortable li.static").each(function () {
         $(this).attr("id", "static-" + $(this).index());
    }); 
   
});
$("#sortable").sortable({
    "cancel":"li.static",
    "update":function(event, ui) {
        $("#sortable li.static").each(function() {
           var desiredLocation = $(this).attr("id").replace("static-","");
           var currentLocation = $(this).index();
           while(currentLocation < desiredLocation) {
             $(this).next().insertBefore(this);
              currentLocation++;  
            }
            while(currentLocation > desiredLocation) {
             $(this).prev().insertAfter(this);
              currentLocation--;  
            }
        });
    }
});