我正在尝试创建一个可以复制并拖动到可放置物体上的draggalbe项目。好的,经过一番努力后,继续工作并使生成的重复项可拖动。但是“drop”方法使得如果我多次拖动新克隆,它会继续克隆自身。我明白它为什么这样做,但我不太确定如何关闭它。只有可转换框外的项目才应该是可复制的。一旦进入盒子,复制品也应该能够四处移动,但不能克隆自身。
尝试将小刺猬拖到盒子上(到目前为止,一切顺利。),然后将其拖放到盒子内几次以查看问题。
$(function() {
$("#draggable1").draggable({ helper: 'clone', revert: "invalid" });
$("#panel1").droppable({
drop: function(event, ui) {
$(this).append($(ui.helper).clone().draggable());
}
});
});
最佳答案
你需要一种方法让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 - 复制 Jquery Draggable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7459512/