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中。请注意，对于父级droppables，公差设置为“触摸”

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

但这正是这意味着 - ＆＃39; Draggable可以重叠任何数量的droppable。＆＃39; （来自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;` 
        }
    });

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

2 个答案: