jquery拖放：我可以防止一个元素在被删除后被拖放到另一个div吗？

Question

我已经尝试了很长时间，但没有任何运气，我决定在这里问。

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

目前，我在页面上动态添加了许多带有“父”类的 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 中。请注意，对于父级 droppable，容差设置为“触摸”

$( ".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'

但这正是这意味着 - 'Draggable 与 droppable 重叠任意数量。' （来自http://api.jqueryui.com/droppable/#option-tolerance）

检查一下：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;` 
        }
    });