JSFiddle - React, Tailwind, and code Playground

HTML

<div id="c1" class="containment">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
</div>

<div id="c2" class="containment">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

<div id="c3" class="containment">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

CSS

.containment {
    border: 1px solid green;
    margin: 50px;
}
.item {
    width: 100px;
    height: 100px;
    background: #E0E0E0;
    border: 5px solid #0000A0;
    text-align: center;
    line-height: 100px;
}
#c1 {
    width: 330px;
    height: 330px;
}
#c1 .item, #c2 .item {
    float: left;
}
#c2 {
    width: 440px;
    height: 110px;
}
#c3 {
    width: 110px;
    height: 440px;
}

JavaScript

// Default sortables

jQuery.ui.sortable.prototype._intersectsWithSides = function(item) {

        var isOverBottomHalf = $.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top + (item.height/2), item.height),
            isOverRightHalf = $.ui.isOverAxis(this.positionAbs.left + this.offset.click.left, item.left + (item.width/2), item.width),
            verticalDirection = this._getDragVerticalDirection(),
            horizontalDirection = this._getDragHorizontalDirection(),
            intersectsContainment = false;

        if (!horizontalDirection && !verticalDirection) return false;
        if (this.floating && horizontalDirection) {
            if (this.containment) intersectsContainment = ((this.positionAbs.left <= this.containment[0]) || (this.positionAbs.left >= this.containment[2]));
            return intersectsContainment || ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf));
        } else {
            if (this.containment) intersectsContainment = ((this.positionAbs.top <= this.containment[1]) || (this.positionAbs.top >= this.containment[3]));
            return intersectsContainment || (verticalDirection && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf)));
        }

    };

$('#c1').sortable({
    'containment': '#c1'
});

$('#c2').sortable({
    'containment': '#c2',
    'axis': 'x'
});
$('#c3').sortable({
    'containment': '#c3',
    'axis': 'y'
});