JSFiddle - React, Tailwind, and code Playground

by manoj

HTML

<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<ul id="draggables">

    <li>foo1</li>
    <li>foo2</li>
    <li>foo3</li>

</ul>

<hr>

<ul class="droppable new">

</ul>

CSS

ul { list-style: none; }
li { cursor: pointer; }

#draggables, .droppable {
    border: 1px solid;
    padding: 10px;
}

.droppable.new { border: 1px dashed; }

JavaScript

$(function() {
    
    $('#draggables > li').draggable({
        appendTo: 'document',
        revert: 'invalid'
    });
    
    $('.droppable > li').draggable({
        appendTo: 'document',
        revert: 'invalid'
    });
    
    $('#draggables').droppable({
        accept: '.droppable > li',
        drop: function(event, ui) {
            ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this));
            cleanUp();
        }
    });
    
    initDrop($('.droppable'));
    
});

function initDrop($element) {
    
    $element.droppable({
        accept: function(event, ui) {
            return true;
        },
        drop: function(event, ui) {
            if($(this).hasClass('new')) {
                var clone = $(this).clone();                
                $(this).after(clone);
                $(this).removeClass('new');
                initDrop( clone );
            }
            ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this));  
            cleanUp();
        }
    }).sortable({
        items: 'li',
        revert: false,
        update: function() {
            cleanUp();   
        }
    });
    
}

function cleanUp() {
    
    $('.droppable').not('.new').each(function() {
		if($(this).find('li').length == 0) {
			$(this).remove();
		}
	});
    
}