JSFiddle - React, Tailwind, and code Playground

by jasper

HTML

<ul>
    <li id="one">item-1</li>
    <li id="two">item-2</li>
    <li id="three">item-3</li>
    <li id="four">item-4</li>
</ul>

CSS

li {
    position : relative;
    height   : 20px;
}

JavaScript

var $LIs     = $('ul').children(),
    liHeight = 20;
$LIs.on('click', function () {
    
    var index      = ($(this).index()),
        $LIsAfter  = $LIs.filter(':gt(' + index + ')');
    
    console.log(index);
    
    $(this).css({ position : 'absolute', top : $(this).position().top });
    
    $.each($LIsAfter, function (i) {
        $(this).css({ position : 'absolute', top : ((i + index + 1) * liHeight) });
    });
    
    $(this).stop(true, true).animate({ top : (($LIs.length - 1) * liHeight)}, 1000, function () {
        $(this).appendTo('ul').css({ position : 'relative', top : 0 });
    });
    
    $.each($LIsAfter, function (i) {
        $(this).stop(true, true).animate({ top : ((index + i) * liHeight) }, 1000, function () {
            $(this).css({ position : 'relative', top : 0 });
        });
    });
});