JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <ul class="sortable">
        <li data-item="3">
            <div class="item" id="item-3">
                 <h2>This is definitely a draggable item.</h2>
                 <h3>Please drag me to the bottom to see the issue!</h3>
            </div>
        </li>
        <li data-item="1">
            <div class="item" id="item-1">
                 <h2>This is a draggable item.</h2>
            </div>
        </li>
        <li data-item="2">
            <div class="item" id="item-2">
                 <h2>This is also a draggable item.</h2>
            </div>
        </li>
    </ul>
</div>

CSS

body {
    background-color: #000000;
}
* {
    color: white;
}
.dropstyle {
    background: salmon;
    border: 4px dashed lightyellow;
    height: 100px;
}
#container {
}
#container ul {
    list-style: none;
    padding: 0
}
#container ul li #item-1 {
    background-color: darkcyan;
}
#container ul li #item-2 {
    background-color: cornflowerblue;
}
#container ul li #item-3 {
    background-color: saddlebrown;
}
#container ul li #item-3 {
    padding: 400px 40px;
}
#container ul li #item-2 {
    padding: 200px 40px;
}
#container .item {
    padding: 40px;
}

JavaScript

var zoom = 0.4;

/**
 ** This has some code from question
 ** http://stackoverflow.com/questions/2930092/jquery-draggable-with-zoom-problem and
 ** http://stackoverflow.com/questions/8605439/jquery-draggable-div-with-zoom
 * */
$('#container ul').sortable({
    revert: true,
    placeholder: "dropstyle",
    tolerance: "poicnter",
    start: function (evt, ui) {
        /*
         $('#container > .center > ul > li').each(function() {
         var containerHeight = ($(this).find('div.site-item:first').height() * 0.4);
         console.log(containerHeight);
         $(this).css({'zoom': '0.4'});
         $('li > .item').css({height: containerHeight, overflow: 'hidden'});
         })*/
        var elementToZoom = $('#container')
        zoomElement(elementToZoom, zoom)

        pointerY = (evt.pageY - elementToZoom.offset().top) / zoom - parseInt($(evt.target).css('top'));
        pointerX = (evt.pageX - elementToZoom.offset().left) / zoom - parseInt($(evt.target).css('left'));
    },
    beforeStop: function (event, ui) {
        zoomElement($('#container'), 1)
    },
    drag : function(evt, ui) {
        var canvasTop = $('').offset().top;
        var canvasLeft = $('#container').offset().left;
        var canvasHeight = $('#container').height();
        var canvasWidth = $('#container').width();

        // Fix for zoom
        ui.position.top = Math.round((evt.pageY - canvasTop) / zoom - pointerY);
        ui.position.left = Math.round((evt.pageX - canvasLeft) / zoom - pointerX);

        // Check if element is outside canvas
        if (ui.position.left < 0) ui.position.left = 0;
        if (ui.position.left + $(this).width() > canvasWidth) ui.position.left = canvasWidth - $(this).width();
        if (ui.position.top < 0) ui.position.top = 0;
        if (ui.position.top + $(this).height() > canvasHeight) ui.position.top = canvasHeight - $(this).height();

        // Finally, make sure offset aligns with position
        ui.offset.top =...