JSFiddle - React, Tailwind, and code Playground

by Ketan Patel

HTML

<script src="http://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<ol class="example">
    <li><span>1</span>
Was 1 at beginning</li>
    <li><span>2</span>
Was 2 at beginning</li>
    <li><span>3</span>
Was 3 at beginning</li>
    <li><span>4</span>
Was 4 at beginning</li>
    <li><span>5</span>
Was 5 at beginning</li>
    <li><span>6</span>
Was 6 at beginning</li>
    <li><span>7</span>
Was 7 at beginning</li>
    <li><span>8</span>
Was 8 at beginning</li>
    <li><span>9</span>
Was 9 at beginning</li>
    <li><span>10</span>
Was 10 at beginning</li>
</ol>

CSS

body.dragging, body.dragging * {
    cursor: move !important;
}
.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}
ol.example {
    margin: 30px 0;
    padding: 0;
}
ol.example li {
    list-style-type: none;
    display: block;
    border: 1px solid #c7c7c7;
    cursor: pointer;
    height: 2em;
}
ol.example li.placeholder {
    position: relative;
    list-style-type: none;
    height: 2em;
    background: none #eee;
    /** More li styles **/
}
ol.example li.placeholder:before {
    position: absolute;
    /** Define arrowhead **/
}

JavaScript

$(function () {
    $(".example").sortable({
        onDrop: function ($item, container, _super, event) {
            $('.example li').removeClass('dragged');
            $("body").removeClass('dragging');
            $('.example span').each(function (i) {
                var humanNum = i + 1;
                alert(humanNum);
                $(this).html(humanNum + '');
            });
        }
    });
});