复制Jquery Draggables

Question

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

例

尝试将小刺猬拖到盒子里(到目前为止,这么好.),然后将它拖放到盒子里几次以查看问题.

$(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文档,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')