DRAGGABLE + DROPPABLE

by bizamajig

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 initDrop($element)
{
    $element.droppable({
        accept: '#draggables > li',
        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));    
        }
    });
}


$( 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));
        } 
    });
    
    initDrop($('.droppable'));
        
});