JSFiddle - React, Tailwind, and code Playground

HTML

<div class="noSelect"> Click and drag the boxes vertically:</div>
<div class="container noSelect"></div>

CSS

body{
 font-family : Georgia, serif;
 font-size : 14px;  
}
.item{
  position: absolute;
  border : 1px solid #444;
  padding : 3px;
  margin:5px;
  background-color: white;
  cursor : pointer;
}
.noSelect{
  /* make sure text isn't selectable */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.container{
 position: absolute;
 top: 50px;  
 background-color : #efefef;
 border : 1px solid gray;
 padding : 5px;
}

JavaScript

var body = $("body");
var container = $(".container");
var currentItem;
var items = [];
var zIndex = 10;
var heightOffset = 60;
var padding = parseInt(container.css("padding-top"));

// This array is meant to represent any form of dynamic data
// it could by xml or json or some other format
var data = ["one", "two", "three", "four", "five", "six"];
            

for (var i = 0; i<data.length; i++){
   makeItem(data[i], padding + i * heightOffset);   
}
container.css("height", padding*2 + i * heightOffset).css("width",320);

function sortByPositionY(a, b){
    return a.position().top - b.position().top;
}

$(document).mousemove(function(e){
 mouseX = e.pageX;
 mouseY = e.pageY;    
});

$(document).mouseup(function(){
    if (currentItem){
      clearInterval(currentItem.data("drag"));
      items.sort(sortByPositionY);
      for (var i = 0; i<items.length; i++){
          items[i].animate({top: padding + i * heightOffset}, "fast"); 
      }
    }
});

function makeItem(txt, y){
    container.append("<div class='item'/>");
    var item = $(".item").last();
    item.css("width", 300).css("height",50).css("top", y);
    // make it non-selectable in IE
    item.attr("unselectable", "on");
    item.text(txt);
    items.push(item);
    item.mousedown(function(e){
        var startY = mouseY - item.position().top;
        item.css("z-index",zIndex++);
        currentItem = item;
        currentItem.data("drag", setInterval(function(){
            item.css("top", mouseY-startY);    
        }, 60));
    });
}