jquery - 复制 Jquery Draggable

Question

我正在尝试创建一个可以复制并拖动到可放置物体上的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')