jQuery UI - 放置事件后克隆可放置/可排序列表

Question

基本上，我有一个可拖动项目的列表，最初有一个可放置的元素供它们拖入。当一个项目被拖到 droppable 中时，droppable 被克隆（在附加项目之前）并作为新的 droppable 区域附加。

看看这个精简的小提琴：http://jsfiddle.net/DKBU9/1/（省略 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));    
    }
});

如您所见，拖放操作适用于初始元素，但不会保留在克隆中。我认为clone(true, true) 复制了匹配的子元素及其事件处理程序。

我什至尝试将上面的 JS 放在一个函数中并在 drop 事件中运行该函数，但我什么也没得到。

最终我希望能够在“池”列表和克隆列表之间以及克隆列表本身之间拖放，以及对克隆列表中的项目进行排序。

Answer 1

看看this fiddle。

您需要再次设置droppable 事件处理程序。我认为 clone(true) （即与数据和事件）有些混淆。看看this answer。具体来说：

我认为复制具有插件的元素不是很安全 应用到它，除非你 100% 确定插件的方式 设计和编码可以支持使用相同的多个 DOM 元素 插件实例。

在这种情况下，在克隆之后添加可放置事件会更简单。

新功能是：

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，它还发现克隆的项目不可丢弃（请查看解决方法，以防它对您有用）。