JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<ul id="sortable">
    <li class="ui-state-default"><div class="ui-icon ui-icon-arrowthick-2-n-s"></div>Item 1</li>
    <li class="ui-state-default"><div class="ui-icon ui-icon-arrowthick-2-n-s"></div>Item 2</li>
    <li class="ui-state-default"><div class="ui-icon ui-icon-arrowthick-2-n-s"></div>Item 3</li>
   
</ul>

CSS

#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}
#sortable li {
    margin: 0 3px 3px 3px;
    padding: 0.4em;
    padding-left: 1.5em;
    font-size: 1.4em;
    height: 18px;
}
#sortable li div {
    position: absolute;
    margin-left: -1.3em;
}

JavaScript

$("#sortable").sortable({

    start: function (event, ui) {
    console.log(ui);
        ui.item.startPos = ui.item.index();
    },
    stop: function (event, ui) {
    console.log(ui);
        // handle swapping from bottom to top( 7 -> 1)
        if (ui.item.startPos > ui.item.index()) {
            // when items are next to each other, don't swap
            if ((ui.item.startPos - ui.item.index()) == 1) return;
            $("li").eq(ui.item.startPos).after(ui.item.next());
        } else {
            // when items are next to each other, don't swap
            if ((ui.item.index() - ui.item.startPos) == 1) return;
            // handle swapping from top to bottom(1 -> 7)
            $("li").eq(ui.item.startPos).before(ui.item.prev());
        }
    }
});
$("#sortable").disableSelection();