JSFiddle - React, Tailwind, and code Playground

by djmartini

HTML

<div class="sortable">
        
    <div data-group-item-id="First" class="group-caption">
        <h4>PARENT #1</h4>
        <div class="move">+</div>
        <div class="group-items">
            <div data-item-id="0" class="group-item">CHILD #1<div class="move">+</div></div>
            <div data-item-id="1" class="group-item">CHILD #2<div class="move">+</div></div>
        </div>
    </div>
    
    <div data-group-item-id="Second" class="group-caption">
        <h4>PARENT #2</h4>
        <div class="move">+</div>
        <div class="group-items">
            <div data-item-id="2" class="group-item">CHILD #3<div class="move">+</div></div>
            <div data-item-id="3" class="group-item">CHILD #4<div class="move">+</div></div>
        </div>
    </div>
    
    <div data-group-item-id="Third" class="group-caption">
        <h4>PARENT #3</h4>
        <div class="move">+</div>
        <div class="group-items">
            <div data-item-id="4" class="group-item">CHILD #5<div class="move">+</div></div>
            <div data-item-id="5" class="group-item">CHILD #6<div class="move">+</div></div>
        </div>
    </div>    
</div>

<div class="hide-or-show">PRESS toArray</div>

CSS

.sortable {

    }
    .group-caption {
        background: #D3CAAF;
        width: 400px;
        display: block;
        padding: 20px;
        margin: 0 0 15px 0;
    }
    .group-item {
        background: #5E5E5E;
        width: 300px;
        height: 30px;
        display: block;
        padding: 3px;
        margin: 5px;
        color: #fff;
    }
    .move {
        background: #ff0000;
        width: 30px;
        height: 30px;
        float: right;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        line-height: 30px;
        font-family: Arial;
        cursor: move;
    }
    .movable-placeholder {
        background: #ccc;
        width: 400px;
        height: 100px;
        display: block;
        padding: 20px;
        margin: 0 0 15px 0;
        border-style: dashed;
        border-width: 2px;
        border-color: #000;
    }
	.hide-or-show {
		background: rgba(169, 241, 134, 0.7);
		display: inline-block;
		padding: 15px;
		border: 2px solid #008000;
		position: absolute;
		top: 10px;
		left: 500px;
		cursor: pointer;
	}

JavaScript

$(document).ready(function(){
		
		// Sort the parents
		$(".sortable").sortable({
			containment: "parent",
			items: "> div",
			handle: ".move",
			tolerance: "pointer",
			cursor: "move",
			opacity: 0.7,
			revert: 300,
			delay: 150,
			dropOnEmpty: true,
			placeholder: "movable-placeholder",
			start: function(e, ui) {
				ui.placeholder.height(ui.helper.outerHeight());
			}
		});
		
		// Sort the children
		$(".group-items").sortable({
			containment: "document",
			items: "> div",
			connectWith: '.group-items'
		});
		
		$(".hide-or-show").on("click", function(){
			console.dir($(".sortable").sortable("toArray", {"attribute": "data-item-id"}));
		});
		
	})