JSFiddle - React, Tailwind, and code Playground

by chadarsenault

HTML

<ul class="draggable-container">
    <li id="1" class="one draggable" data-sortorder=1>One</li>
    <li id="2" class="two draggable" data-sortorder=2>Two</li>
    <li id="3" class="three draggable" data-sortorder=3>Three</li>
    <li id="4" class="four draggable" data-sortorder=4>Four</li>
</ul>

CSS

* {box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
html,body {font-family:"Trebuchet MS", sans-serif; padding:0;margin:0;height:100%; }
.draggable-container {
    list-style:none;
    padding:0;
    margin:0;
}
.draggable {
    text-align:center;
    height: 80px;
    list-style: none;
    display: block;
    position: relative;
    color: #fff;
}
.one { background-color: #FF3835; }
.two { background-color: #E89225; }
.three { background-color: #9125E8; }
.four { background-color: #2889FF; }

JavaScript

var downEvent,upEvent,dragEvent,event,log,startMouseX,startMouseY,endMouseX,endMouseY,elLeft,elTop,elRight,elBottom,dragLeft,dragTop,dragRight,dragBottomendXOffset,endYOffset,elHeight,elWidth,displacement,cssXOffset,cssLeft,cssTop,cssLeftDiff,cssTopDiff,cssContainerTopDiff,gridX,gridY,dragDirHorizontal,dragDirVertical,curMouseX,curMouseY,topNeighbor,bottomNeighbor;

//=============MOUSEDOWN=====================
$('.draggable').on('mousedown', function(e) {
    var topNeighbor = {};
    var bottomNeighbor = {};
    var topDisp,bottomDisp;
    downEvent = e;
    startEl = downEvent.target;
    startMouseX = downEvent.clientX;
    startMouseY = downEvent.clientY;
    elHeight = startEl.offsetHeight;
    elWidth = startEl.offsetWidth;
    //=RELATIVE TO CONTAINER=====//
    elLeft = $(startEl).offset().left;
    elTop = $(startEl).offset().top;
    elRight = elLeft + elWidth;
    elBottom = elTop + elHeight;
    //===========================//

    $('.draggable').not($(startEl)).each(function(e) {
        
        if($(this).offset().top + this.offsetHeight <= elTop) {
            if(topNeighbor.hasOwnProperty('id') === false) {
                var topDisp = elTop - ($(this).offset().top + this.offsetHeight);
                topNeighbor.id = $(this).attr('id');
                topNeighbor.bottom = $(this).offset().top + this.offsetHeight;
            } else {
                topDisp = elTop - ($(this).offset().top + this.offsetHeight);
                if(topDisp < topNeighbor.bottom) {
                    topNeighbor.id = $(this).attr('id');
                    topNeighbor.bottom = $(this).offset().top + this.offsetHeight;
                }
            }
            
        }
        
        if($(this).offset().top >= elBottom) {
            if(bottomNeighbor.hasOwnProperty('id') === false) {
                bottomDisp = $(this).offset().top - elBottom;
                bottomNeighbor.id = $(this).attr('id');
                bottomNeighbor.top =...