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

Question

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

看看这个精简的 fiddle :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事件处理程序。我认为克隆(true)(即数据和事件)在某种程度上使事情变得困惑。看看 this answer 。具体来说:

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.

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

新功能是:

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，它也发现克隆的项目不可删除(也请查看解决方法，以防它对您有用)。