JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sortable" class="ui-state">
				<div id="draggable1" class="swapable ui-state-default">1</div>
				<div id="draggable2" class="swapable ui-state-default">2</div>
				<div id="draggable3" class="swapable ui-state-default">3</div>
                <div id="draggable4" class="swapable ui-state-default">4</div>
</div>

CSS

.ui-state-default {
	height: 50px;
	width: 100px;
	float: left;
	margin: 10px;
	padding: 0;
	list-style-type: none;
   	
}
#sortable {
	position: relative;
	height: 500px;
    width: 350px;
}

JavaScript

$(function() {
    $(".swapable").
    draggable({ revert: true }).
    droppable({
        drop:function(event,ui){
            swapNodes($(this).get(0),$(ui.draggable).get(0));
        }});
});


//by bobince - http://stackoverflow.com/a/698440/2033671
function swapNodes(a, b) {
    var aparent= a.parentNode;
    var asibling= a.nextSibling===b? a : a.nextSibling;
    b.parentNode.insertBefore(a, b);
    aparent.insertBefore(b, asibling);
}