0

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

我正在使用 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/

4

2 回答 2

1

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

tolerance:'touch'

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

检查一下：http: //jsfiddle.net/Dyawa/2/ - 只需消除公差即可查看差异。

建议您使用：

tolerance: 'pointer'
于 2012-12-04T00:48:21.687 回答
0

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

$( ".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;` 
        }
    });
于 2012-12-04T00:09:35.053 回答