jquery拖放:我可以防止一个元素在被拖放后被拖放到另一个div吗

Question

我一直在努力完成这项工作，但没有任何运气，我决定在这里提问。

我正在使用jquery ui库创建拖放div。

目前，我在页面上动态添加了许多类为parent的div：

$( ".parent" ).droppable({
accept: ".child",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
tolerance:'touch',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" ).appendTo(ui.Target);
}
});

然后，我用类"child"动态创建一个div，子div可以拖放到任何父div中。请注意，对于母滴管，公差设置为"触摸">

$( ".child" ).draggable();

父div的大小小于子div。每当我拖动一个子div时，如果我将其移动到两个父div上(请注意，在这一点上，我还没有删除子div)，理想情况下，我希望子div只被删除到第一个父div中。

发生的情况是，子div被附加到第一个父div中。然后，它从第一个母div移动到第二个父div。

有没有一种方法可以让子div保持可拖动状态，但只被放到第一个父div中？

感谢阅读。

如果不清楚，请告诉我，我会重新表述

将孩子拖到父对象2和3上会显示相同的行为：http://jsfiddle.net/Dyawa/3/

Answer 1

我注意到您注意到它被设置为：

tolerance:'touch'

但这正是它的意思——"可拖动的与可丢弃的任意数量重叠。"(来自http://api.jqueryui.com/droppable/#option-公差)

看看这个：http://jsfiddle.net/Dyawa/2/-只需去除公差即可看出差异。

建议您使用：

tolerance: 'pointer'

Answer 2

由于我没有看到完整的代码，所以有点难以猜测，但请尝试以下操作：

$( ".parent" ).droppable({
accept: ".child",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
tolerance:'touch',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" ).appendTo(ui.Target);
event.preventDefault(); // or `return false;` 
}
});