JSFiddle - React, Tailwind, and code Playground

by Liu David

HTML

<div id="container">
        <div id="one" class="move">div 1</div>
        <div id="two" class="move">div 2</div>
        <div id="three" class="move">div 3</div>
    </div>

CSS

#container {
    width: 200px;
    color:#fff;
    position: relative;
    text-align:center;
}
#container div {
    position: relative;
    margin:10px;
    background:#ff00ab;
    padding:5px;
    border-radius:3px;
    text-align:center;
    
}

JavaScript

var animating = false;

$('#container').on('click', '.move', function () {
    
    var clickedDiv = $(this).closest('div'),
        prevDiv = $("#container > :first-child"),
        distance = clickedDiv.offset().top - prevDiv.offset().top;
    
    if (!clickedDiv.is(":first-child")) {
        animating = true;
        $.when(clickedDiv.animate({
           top: -distance
        }, 500),
        prevDiv.animate({
            top: distance
        }, 500)).done(function () {
            prevDiv.css('top', '0px');
            clickedDiv.css('top', '0px');
            prevDiv.insertBefore(clickedDiv);
            clickedDiv.prependTo("#container");
            animating = false;
        });
    }
});