JSFiddle - React, Tailwind, and code Playground

by johnbk

HTML

<div class="containers">
    
    <div>
        <ul class="rows">
            <li>Row 1</li>
            <li>Row 2</li>
            <li>Row 3</li>
        </ul>
    </div>
    
    <div>
        <ul class="rows">
            <li>Row 4</li>
            <li>Row 5</li>
        </ul>
    </div>
        
    <div>
        <ul class="rows">
            <li>Row 5</li>
            <li>Row 6</li>
        </ul>
    <div>
    
</div>

CSS

body {
    background-color: #f4f4f4;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
div.containers > div {
    padding: 20px;
    margin: 0;
    border: 3px solid red;
    background-color: #fff;
    float: left;
}

ul.rows {
    min-width: 200px;
    min-height: 200px;
}
ul.rows li {
    padding: 20px;
    margin: 0;
    border: 3px solid blue;
    background-color: #fff;
}
ul li {
    margin-bottom: 15px !important;
    cursor: move;
}
ul li:last-child {
    margin-bottom: 0;
}
.ui-state-highlight {
    border: 2px dotted steelblue !important;
}

JavaScript

$(document).ready(function () {
    $(".containers").sortable({
        placeholder: "ui-state-highlight",
        forcePlaceholderSize: true
    });
    $(".containers").disableSelection();

    $(".rows").sortable({
         connectWith:'.rows',
        placeholder: "ui-state-highlight",
        forcePlaceholderSize: true
    });
    $(".rows").disableSelection();
});