JSFiddle - React, Tailwind, and code Playground

by mustafa yılmaz

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/blitzer/jquery-ui.css">
<ul>
    <li><input/>THIS</li>
    <li><input/>IS</li>
    <li><input/>A</li>
    <li><input/>TEST</li>
    <li><input/>OF</li>
    <li><input/>THING</li>
</ul>

CSS

li input {
    margin: 2px 5px;
    width: 15px;
}

li {
    border: blue 1px solid;
    width: 300px;
}

JavaScript

function setOrder() {
    $.each($('ul li input'), function(index, el) {
        el.value = (index + 1);
    });
}

setOrder();

$('ul li input').live('change', function() {
    var change = (parseInt(this.value) - 1);
    if(change > ($('ul li input').length - 1)){
        change = $('ul li input').length - 1; 
    }
    
    var index = $(this).index('ul li input');
    var move = $('ul li')[change];

    var arr = [];

    $.each($('ul li'), function(ind, el) {
        arr[ind] = $(this).clone();
    })
    arr[index] = move;
    $('input', move).val(index + 1);
    arr[change] = $(this).parent()[0];
    arr.sort();

    $('ul li').remove();
    var indexAt = 0;
    $.each(arr, function(index, el) {
        $('ul').append(el);
    });
    setOrder();
})
$('ul').sortable({
    stop: function(a, b) {
        var arr = [];
        var i = 0;
        $.each($('ul li'), function(ind, el) {
            arr[i] = $(this).clone();
            i++;
        })

        $('ul li').remove();
        $.each(arr, function(index, el) {
            $('ul').append(el);
        });
        setOrder()
    }
});