JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div class="container">
    <h4>Container</h4>
    <div class="item">1</div>
    
    <div class="container">
        <h4>Container</h4>
        <div class="item">3</div>
    </div>
    
    <div class="item">5</div>
</div>

CSS

.container {
     border: 1px solid black;
     background-color: lightyellow;
     padding: 20px;
 }
 .container h4 {
     height: 24px;
 }
 .item {
     border: 1px solid gray;
     background-color: greenyellow;
     height: 24px;
 }

JavaScript

$( ".container" ).sortable({
    items: ".container, .item",
    connectWith: ".container"
});