JSFiddle - React, Tailwind, and code Playground

by Raika

HTML

<div class="right">
    <div class="dest"></div>
</div>
<div class="left">
    <div class="parent box"></div>
    <div class="child1 box"></div>
    <div class="child2 box"></div>
</div>

CSS

div.right {
    float:right;
    width:70%;
}
div.left {
    float:left;
    width:30%;
}
div.box {
    border:1px solid #808080;
}
div.parent {
    width:100px;
    min-height:100px;
}
div.child1 {
    width:50px;
    height:50px;
}
div.child2 {
    width:20px;
    height:20px;
}
div.dest {
    border:1px solid #808080;
    min-height:300px;
}

JavaScript

$(function () {
    $('.parent,.child1,.child2').draggable({
        revert: true
    });
    $('.dest').droppable({
        accept: '.parent',
        drop: function (event, ui) {
            $newElt = $('<div class="parent box"></div>');
            $newElt.appendTo(this);
            $newElt.droppable({
                accept: '.child1',
                drop: function (event, ui) {
                    $newtSubElt = $('<div class="child1 box"></div>');
                    $newtSubElt.appendTo(this);
                    $newtSubElt.droppable({
                        accept: '.child2',
                        drop: function (event, ui) {
                            if ($(this).find('.child2').length < 1) {
                                $('<div class="child2 box"></div>').appendTo(this);
                            }
                        }
                    });
                }
            });
        }
    });
});