JSFiddle - React, Tailwind, and code Playground

HTML

<ol id="rankings">
<li class="sortable">Dog</li>
<li class="">Cat</li>
<li class="sortable">Parrot</li>
<li class="sortable">Gerbil</li>
<li class="sortable">Snake</li>
<li class="">Goldfish</li>
</ol>

CSS

ol#rankings li {
    background-color: #f00;
}

ol#rankings li.sortable {
    background-color: #0f0;
}

JavaScript

$(function() {   
    $('#rankings').sortable({
        axis: 'y',
        items: '.sortable',
        start: function () {
            $(this).find("li:not(.sortable)").each(function () {
                $(this).data("fixedIndex", $(this).index());
            });
        },        
        change: function () {
            $(this).find("li:not(.sortable)").each(function () {
                $(this).detach().insertAfter($("#rankings li:eq(" + ($(this).data("fixedIndex")-1) + ")"));
            });
        }
    });
});