Question

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

Example

尝试将小刺猬拖到盒子上（到目前为止，这么好。），然后将其拖放到盒子内几次以查看问题。

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

Answer 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')

复制Jquery Draggables

1 个答案: