JSFiddle - React, Tailwind, and code Playground

by Mark McFadden

HTML

<ul id="sortable">
    <li id="item0" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li id="item1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li id="item2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li id="item3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li id="item4" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
</ul>
<div id="startIndex">start</div>
<div id="stoppedIndex">stopped</div>
<div id="currentIndex">index</div>
<div id="itemMoved">item moved</div>

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 span {
    position: absolute;
    margin-left: -1.3em;
}

JavaScript

$("#sortable").sortable({
    start: function (event, ui) {
        $("#startIndex").text("Start position: " + ui.item.index());
        $("#currentIndex").text("");
        $("#stoppedIndex").text("");
    },
    stop: function (event, ui) {
        $("#currentIndex").text("");
        $("#stoppedIndex").text("New position: " + ui.item.index());
        $("#itemMoved").text("Item ID Moved: " + ui.item.attr("id"));
    },
    change: function (event, ui) {
        // When the item postion is changed while dragging a item, I want it's position
        $("#currentIndex").text("Current Index: " + ui.placeholder.index());
    }
});