复制 Jquery Draggables

Posted 2023-05-08

【中文标题】复制 Jquery Draggables

【英文标题】：Duplicating Jquery Draggables

【发布时间】：2011-11-19 13:05:19

【问题描述】：

我正在尝试创建一个可以复制并拖动到 droppable 上的 Draggalbe 项目。好的，经过一番努力，继续工作并使生成的副本可拖动。但是“drop”方法使得如果我多次拖动新克隆，它会继续克隆自身。我明白它为什么会这样做，但我不太确定如何将其关闭。只有可放置框外的项目应该是可复制的。一旦进入盒子，副本也应该能够四处移动，但不能克隆自己。

Example

尝试将小刺猬拖到盒子上（到目前为止，一切都很好。），然后将它拖放到盒子内几次以查看问题。

$(function() 
    $("#draggable1").draggable( helper: 'clone', revert: "invalid" );
    $("#panel1").droppable(
        drop: function(event, ui) 
            $(this).append($(ui.helper).clone().draggable());
        
    );
);

【问题讨论】：

删除克隆的 id attr 有帮助吗？

【参考方案1】：

您需要一种方法让 droppable 检测被丢弃的外部刺猬和已经掉落的刺猬之间的差异。这样，您可以确保 drop 回调只克隆从盒子外面掉下来的刺猬。

很方便，您已经有一种方法可以检测到这一点：框外的<img> 有一个ID，而框内的<img> 元素没有。所以你需要做的就是弄清楚如何在drop回调函数中访问被删除元素的“源”。

根据droppable docs，ui.draggable 是“当前可拖动元素，一个 jQuery 对象”，因此您可以通过多种方式获取该元素的 id。这是一种可行的方法：

$("#draggable1").draggable(
    helper: 'clone',
    revert: "invalid"
);

$("#panel1").droppable(
    drop: function(event, ui) 
        if (ui.draggable[0].id) 
            $(this).append($(ui.helper).clone().draggable());
        
    
);

演示：http://jsfiddle.net/mattball/MJhcp/

---

由于ui.draggable 是一个成熟的jQuery 对象，它也可以使用以下任何一个来代替ui.draggable[0].id：

ui.draggable.get(0).id ui.draggable.attr('id') ui.draggable.prop('id')