JSFiddle - React, Tailwind, and code Playground

by Raul Rodriguez

HTML

<div class="parents">
    <div class="withChildren">
        1
        <div class="children">
            <div class="child">1.1</div>
            <div class="child">1.2</div>
            <div class="child">1.3</div>
        </div>
    </div>
    <div class="withChildren">
        2
        <div class="children">
            <div class="child">2.1</div>
            <div class="child">2.2</div>
            <div class="child">2.3</div>
        </div>
    </div>
    <div class="withoutChildren">
        3
    </div>
</div>

CSS

.withChildren, .withoutChildren { 
    border: solid black 1px;
    padding: 5px;
    margin: 5px;
}
.child{ 
    border: solid black 1px;
    padding: 5px;
}

.children{
    margin-left: 10px;
}

JavaScript

$(".parents").sortable();
//$(".parents").sortable({
//    items: ".withoutChildren",
//    connectWith: ".children"
//});
$(".children").sortable({
    connectWith: ".parents, .children"
});