JQuery UI - Clone droppable / sortable list after drop event

Question

Basically, I have a list of draggable elements and initially one droppable element for dragging them. When an item is dragged into droppable, the droppable is cloned (before the item is added) and is added to the new area as resettable.

Take a look at this stripped-down script: http://jsfiddle.net/DKBU9/1/ (missing sortable ())

HTML

<ul id="draggables"> <li>foo1</li> <li>foo2</li> <li>foo3</li> </ul> <ul class="droppable new"> </ul> 

Js

 $('#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)); } }); $('.droppable').droppable({ accept: '#draggables > li', drop: function(event, ui) { if($(this).hasClass('new')) { var clone = $(this).clone(true, true); $(this).removeClass('new').after(clone); } ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this)); } }); 

As you can see, drag and drop is done for the original elements, but not stored in the clone. I thought that clone(true, true) copied the corresponding and child elements and their event handlers.

I even tried putting the above JS in a function and running that function in drop events, but got nothing.

Ultimately, I want to be able to drag between the pool list and the cloned lists and between the cloned lists themselves, and also sort the items in the cloned lists.

Answer 1

Take a look at this violin .

You will need to install the droppable event handler droppable . I think the clone (true) (i.e. with data and events) is somewhat confusing. Check out this answer . In particular:

I think it’s not very safe to copy an element with a plugin applied to it unless you are 100% sure that the way the plugin was designed and encoded can support multiple DOM elements using the same instance of the plugin.

In this case, it's easier to just add the droppable event after cloning.

New Feature:

 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 look at this question , which also found that the cloned element was not inaccessible (look also at the workaround if it is useful to you),