JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<ul class="sortable">
    <li data-id="{101-201}" data-order="1">
        <div class="heading">
             <h4>Title01 long titleT<span></span></h4>

            <div class="prev"><span>alailable for <br />preview</span>
            </div>
        </div>
    </li>
    <li data-id="{102-202}" data-order="2">
        <div class="heading">
             <h4>Title02 long title<span></span></h4>

            <div class="prev"><span>alailable for <br />preview</span>
            </div>
        </div>
    </li>
    <li data-id="{103-203}" data-order="3">
        <div class="heading">
             <h4>Title03 long title<span></span></h4>

            <div class="prev"><span>alailable for <br />preview</span>
            </div>
        </div>
    </li>
    <li data-id="{104-204}" data-order="4">
        <div class="heading">
             <h4>Title04 long title<span></span></h4>

            <div class="prev"><span>alailable for <br />preview</span>
            </div>
        </div>
    </li>
    <li data-id="{105-205}" data-order="5">
        <div class="heading">
             <h4>Title05 long title<span></span></h4>

            <div class="prev"><span>alailable for <br />preview</span>
            </div>
        </div>
    </li>
</ul>

CSS

li {
    overflow: hidden;
    border: 1px solid black;
    margin-bottom: 10px;
    border-radius: 5px;
    font-family: sans-serif;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.8);
    cursor: default;
}
h4, .prev, .prev span {
    display: inline-block;
}
h4 {
    margin: 0;
    padding: 0;
    font-size: 28px;
    line-height: 36px;
    width: 80%;
}
h4 span {
    padding-left: 30px;
}
.prev {
    margin-left: -10px;
    width: 20%;
    text-align: right;
}
.prev span {
    font-size: 10px;
    line-height:12px;
    text-transform: uppercase;
    text-align: left;
}
.ph {
    background-color: gray;
}

JavaScript

$('.sortable').sortable({
    placeholder: 'ph'
}).on('sortupdate', function (ev, el) {
    var order = calculatePosition(el.item.data('id'));
    console.log(order);
    el.item.data('order', order);
    $('h4 span').each(function () {
        $this = $(this);
        $this.html($this.closest('li').data('order'));
    });
});

function calculatePosition(id) {
    var $el = $('[data-id="'+id+'"]');
    var prev = $el.prev().data('order');
    var next = $el.next().data('order');
    var result;
    if(prev == null) {
        prev = 0;
    }
    if(next == null) {
        result = Math.ceil(prev);
        if(result === prev) {
            result += 1;
        }
        return result;
    }
    return (next+prev)/2;
}