Take a look at this fiddle.
You will need to set the droppable
event handler again. I think that the clone(true) (i.e. with data and events) confuses things somewhat. Have a look at this answer. Specifically:
I think it is not very safe to copy an element that has a plugin applied to it, unless you are 100% sure that the way the plugin was designed and coded could support multiple DOM elements using the same plugin instance.
In this case it is simpler to just add the droppable event after clone.
The new function is:
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));
}
});
}
Also have a look at this question which also found that cloned item was not droppable (have a look at the workaround as well in case it is useful to you).