jQuery UI - Clone droppable/sortable list after drop event

Question

В принципе, у меня есть список перетаскиваемых элементов и изначально один элемент с возможностью перетаскивания для их перетаскивания. Когда элемент перетаскивается в droppable, droppable клонируется (перед добавлением элемента) и добавляется как новая область с возможностью удаления.

Взгляните на этой усеченную скрипке: http://jsfiddle.net/DKBU9/1/ (опущено сортируемых())

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));  
    } 
}); 

Как вы можете видеть, перетаскивание работы для исходных элементов, но не сохраняется в клоне. Я подумал, что clone(true, true) скопировал соответствующие и дочерние элементы и их обработчики событий.

Я даже попытался поместить вышеуказанный JS в функцию и запустить эту функцию в событиях капли, но я ничего не получил.

В конечном счете, я хочу иметь возможность перетаскивать между списком «пул» и клонированными списками и между самими клонированными списками, а также сортировать элементы в клонированных списках.

Answer 1

Посмотрите на this fiddle.

Вам нужно будет снова установить обработчик событий droppable. Я думаю, что клон (правда) (т. Е. С данными и событиями) несколько смущает. Посмотрите на this answer. В частности:

Я думаю, что это не очень безопасно, чтобы скопировать элемент, который имеет плагин , примененных к нему, если вы не 100% уверены, что путь плагин был разработан и закодированы может поддерживать несколько элементов DOM с использованием тот же экземпляр плагина.

В этом случае проще просто добавить событие droppable после клонирования.

Новая функция:

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));  
     } 
    }); 
} 

также посмотреть на this question, который также обнаружил, что клонированный элемент не был Droppable (взгляните на обходной путь, а также в случае, если это полезно для вас).