JSFiddle - React, Tailwind, and code Playground

by jcano

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="container">
    <div class="list">
        <div class="element">text 1</div>
        <div class="element">text 2</div>
        <div class="element">text 3</div>
        <div class="element">text 4</div>
        <div class="element">text 5</div>
        <div class="element">text 6</div>
    </div>
</div>

CSS

.container {
    overflow: hidden;
    height: 300px;
    width: 300px;
    max-height: 300px;
    
    padding 20px;
}
.list {
    overflow-y: scroll;
    height: 100%;
    width: 250px;
    
    border: 1px black solid;
}
.element {
    height: 100px;
    width: 200px;
    padding: 5px;
    border-bottom: 1px white solid;
    background-color: #59BBDF;
    color: white;
    text-align: center;
    cursor: move;
}

JavaScript

var newSortable = $.widget("custom.newSortable", $.ui.sortable, {
    _cacheHelperProportions: function() {
		this.helperProportions = {
			width: this.helper.outerWidth(true),
			height: this.helper.outerHeight(true)
		};
	},
    
    _setContainment: function () {

        var ce, co, over, minY, maxY, minX, maxX,
        o = this.options;
        if (o.containment === "parent") {
            o.containment = this.helper[0].parentNode;
        }
        if (o.containment === "document" || o.containment === "window") {
            this.containment = [
            0 - this.offset.relative.left - this.offset.parent.left,
            0 - this.offset.relative.top - this.offset.parent.top,
            o.containment === "document" ? this.document.width() : this.window.width() - this.helperProportions.width - this.margins.left, (o.containment === "document" ? this.document.width() : this.window.height() || this.document[0].body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top];
        }

        if (!(/^(document|window|parent)$/).test(o.containment)) {
            ce = $(o.containment)[0];
            co = $(o.containment).offset();
            over = ($(ce).css("overflow") !== "hidden");

            // Minimum X is the distance to the element being sorted, considering its margin so there is no wiggle.
            minX = co.left + (parseInt($(ce).css("borderLeftWidth"), 10) || 0) + (parseInt($(ce).css("paddingLeft"), 10) || 0) - this.margins.left;

            // Maximum X is the initial position + width of the container (scrollWidth or offsetWidth)
            // but needs to consider paddings, borders and margins of the container and the added helper
            maxX = co.left + (over ? Math.max(ce.scrollWidth, ce.offsetWidth) : ce.offsetWidth);

            // Removing the padding and border of the container
            maxX = maxX - (parseInt($(ce).css("borderLeftWidth"), 10) || 0) - (parseInt($(ce).css("paddingRight"), 10) || 0) +...