jQuery UI-放置事件后克隆可放置/可排序列表 [英] jQuery UI - Clone droppable/sortable list after drop event

问题描述

基本上，我有一个可拖动项列表，最初是一个可拖放元素，可将它们拖放到其中.将某个项目拖到可放置对象中后，该可放置对象将被克隆(在添加该对象之前)，并作为新的可放置区域被附加.

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

看看这个精简的小提琴: http://jsfiddle.net/DKBU9/1/(省略了sortable())

Take a look at this stripped down fiddle: http://jsfiddle.net/DKBU9/1/ (omitted 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)复制了匹配的子元素和它们的事件处理程序.

As you can see, the dragging and dropping works for the initial elements, but is not preserved in the clone. I thought clone(true, true) copied matched and child elements and their event handlers.

我什至尝试将上述JS放在一个函数中，并在drop事件中运行该函数，但我一无所获.

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

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

Ultimately I want to be able to drag and drop between the "pool" list and the cloned lists and between the cloned lists themselves, as well as sort the items within the cloned lists.

推荐答案

看看 此小提琴 .

Take a look at this fiddle.

您将需要再次设置droppable事件处理程序.我认为clone(true)(即数据和事件)使事情有些混乱.请查看此答案.具体来说:

You will need to set the droppable event handler again. I think that the clone(true) (i.e. with data and events) confuses things somewhat. Have a look at this answer. Specifically:

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

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.

在这种情况下，只需在克隆之后添加droppable事件就更简单了.

In this case it is simpler to just add the droppable event after clone.

新功能是:

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 have a look at this question which also found that cloned item was not droppable (have a look at the workaround as well in case it is useful to you).

这篇关于jQuery UI-放置事件后克隆可放置/可排序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！