JSFiddle - React, Tailwind, and code Playground

by ThiefMaster

HTML

<ul class="list">

<li id="1" class="rank">
<div class="pos_handle">&nbsp;</div>
<span class="pos">1st</span> 
    <div>This is a list item...</div>
</li>

<li id="2" class="rank">
<div class="pos_handle">&nbsp;</div>
<span class="pos">2nd</span> 
    <div>This is a list item...</div>
</li>

<li id="3" class="rank">
<div class="pos_handle">&nbsp;</div>
<span class="pos">3rd</span> 
    <div>This is a list item...</div>
</li>

<li id="4" class="rank">
<div class="pos_handle">&nbsp;</div>
<span class="pos">4th</span> 
    <div>This is a list item...</div>
</li>

<li id="5" class="rank">
<div class="pos_handle">&nbsp;</div>
<span class="pos">5th</span> 
    <div>This is a list item...</div>
</li>


</ul>

CSS

.list {
    width:300px;
}
.list li {
    background:blue;
    color:#fff;
    margin-bottom:5px;
}
.list li:last {
    margin-bottom:0;
}
.list li span {
    float:left;
    background:yellow;
    width:30px;
    color:#000;
    margin-right:10px;
}
.pos_handle {
    height:100%;
    width:20px;
    display:block;
    background:red;
    float:right;
    cursor:move;
}

JavaScript

$(document).ready(function() {

    $(".list").sortable({
        handle: '.pos_handle',
        axis: 'y',
        opacity: 0.6,
        update: function(event, ui) {
            var index = ui.item.index();
            console.log("Moved to new position: " + index); // index can be 0 thru 5
            $('.list').children().each(function(i) {
                $('.pos', this).text(i + 1);
                this.id = 'item-' + (i + 1);
            });

        } // end update function
    });
});