Question

基本上我有一个可拖动项目列表，最初有一个可放置的元素可以拖入它们。将项目拖入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事件处理程序。我认为克隆（true）（即数据和事件）会让事情有些混乱。看看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，它还发现克隆的项目不可删除（如果它对您有用，请查看解决方法）。

jQuery UI - 在drop事件之后克隆droppable / sortable列表

1 个答案: