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

Posted 2023-02-22

【中文标题】jQuery UI - 放置事件后克隆可放置/可排序列表

【英文标题】：jQuery UI - Clone droppable/sortable list after drop event

【发布时间】：2014-01-24 17:06:30

【问题描述】：

基本上，我有一个可拖动项目的列表，最初有一个可放置的元素供它们拖入。当一个项目被拖到 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 事件中运行该函数，但我什么也没得到。

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

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

【讨论】：

完美运行，谢谢。我想我现在对 clone() 有了更好的理解。我确实读过关于插件的那部分，但我略读了一下。这就是为什么我尝试做一个类似的递归函数失败的部分原因。是否可以在上面添加 sortable() ？我刚刚将它链接到 droppable() 函数的末尾，但是 draggable() 在拖动事件上具有先例。

@Bobe - 乐于助人。可以让 sortable() 和 droppable() 一起工作。如果您遇到问题，您可能想试一试并发布一个新的 SO 问题。如果有的话，你可以把cmets里的链接贴在这里，我去看看。

我花了很多时间在它上面，但就是无法得到我想要的结果。如果您想看一下，我创建了一个新问题：***.com/questions/20986157/…