JSFiddle - React, Tailwind, and code Playground

by MightyPork

HTML

<div id="index"></div>
<div class="sortable">
    <div class="nosort">NO SORT DIV</div>
    <div>Apple</div>
    <div>Banana</div>
    <div>Melon</div>
    <div>Peach</div>
    <div>Cherry</div>
</div>

CSS

#index {
    border:1px solid blue;
    width: 20px;
    height: 20px;
}
.sortable div {
    margin: 5px;
    background-color: blue;
}
.sortable div.nosort {
    background-color: red;
}

JavaScript

$(document).ready(function () {
    $('.sortable').sortable({
        items: '> *:not(.nosort)',
        axis: 'y',

        stop: function (event, ui) {
            var index = ui.item.index();
            $('#index').text(index);
        }
    }).disableSelection();
});