JSFiddle - React, Tailwind, and code Playground

by Andrea Scanu

HTML

<div class="sortable">
    <div id="red" class="element"></div> 
    <div id="blue" class="element"></div> 
    <div id="green" class="element"></div> 
    <div id="black" class="element"></div> 
    <div id="grey" class="element"></div> 
    <div id="purple" class="element"></div> 
    <div id="yellow" class="element"></div> 
</div>

CSS

#red {
    background-color: red;
}
#blue {
    background-color: blue;
}
#green {
    background-color: green;
}
#black {
    background-color: black;
}
#grey {
    background-color: grey;
}
#purple {
    background-color: purple;
}
#yellow {
    background-color: yellow;
}
.element {
    width: 400px;
    height: 20px;
}

JavaScript

$(".element").mousedown(function(e) {
   var offset = $(this).offset();
   var relativeY = (e.pageY - offset.top);
   $(this).css("position","absolute").css("top", relativeY);
}).mousedown(function() {
   $(this).css("position","static");
});