JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="item blue">1</div>
    <div class="item green">2</div>
    <div class="item red">3</div>
    <div class="item blue">4</div>
    <div class="item green">5</div>
    <div class="item red">6</div>
</div>

CSS

.item {
    float: left;
    width: 60px;
    height: 60px;
    margin: 5px;
    text-align: center;
    line-height: 60px;
    color: #FFF;
    font-size: 30px;
}
.blue {
    background-color: blue;
}
.green {
    background-color: green;
}
.red {
    background-color: red;
}

JavaScript

$(".item").on("mouseup", function () {
    $(this).css("top", "").css("left", "");
});

$(".item").draggable().droppable({
    drop: function (event, ui) {
        draged = ui.draggable.css("top", "initial").css("left", "initial");
        dropped = $(this);
        var elems = draged.parent().children();
        if (elems.index(draged) > elems.index(dropped)) {
            temp = draged;
            draged = dropped;
            dropped = temp;
        }
        var nElem = draged.next();
        dropped.after(draged);
        nElem.before(dropped);
    }
});