Question

我有一个小问题，我似乎无法解决自己。看看这个小提琴：JSfiddle

这是我遇到的问题的基本示例。我有一个大的div，这是一个可放置的区域。在这个可投放区域内有多个其他可投放区域。

当元素被删除时，内部可放置区域应该通过其代码。相反，外部div的代码似乎运行。难道我做错了什么？ div周围的区域应该保持这种状态，因为元素可以放在这里（不是正式掉落）。

我希望我的问题很清楚，但我认为小提琴手不言而喻。

P.S。 - 在此示例中调整大小不起作用，但在我的开发环境中正在运行。

Rusty和Mark，谢谢你的回复。

我很抱歉令人困惑的缩放器。我刚从代码中删除了它。 New Fiddler

只是为了澄清事情。 box div是一个容器，里面有多个图像。我想要实现以下目标： http://postimage.org/image/qwhtik04f/ 灰色虚线框是我示例中的dropbox2 div。这些投递箱周围的空间是dropbox div。

与电路板的空间是唯一可以在没有任何事情发生的情况下丢弃图像的地方。拖动的图像可以快照回到dropbox2 div。如果图像被拖动到Dropbox div上，图像应该还原。

Answer 1

在内部droppable上设置greedy: true选项将阻止事件发生在外部droppable上：

jQuery('#dropbox2').droppable({
    greedy: true,
    drop: function(event, ui) {
        // ...
    }
});

Answer 2

您的代码在外部<div>：

中有此代码

$("#dropbox").droppable({
    drop: function(event, ui) {
       ui.draggable.draggable( 'option', 'revert', true );
    }
});

这表示当您拖到外部revert时，将true选项设置为<div>。但是，当您放入较小的<div>时，该选项仍设置为true。您需要做的就是在成功删除内部revert后更改可拖动元素的<div>值：

$("#dropbox2").droppable({
    drop: function(event, ui) {
        ui.draggable.position( { of: $(this), my: 'center', at: 'center' } );
        // Add this line
        ui.draggable.draggable( 'option', 'revert', false );
    }
});

更新

Mark指出我的解决方案不会阻止事件传播到父容器。正如他的回答所示，您需要在初始选项中添加greedy: true。 jQuery documentation说：

如果为true，将阻止在嵌套的droppable上传播事件。

这听起来像你正在寻找的。您仍然需要更改可拖动的revert属性，因为greedy仅在您的droppable上设置，不会影响您的可拖动反应。

Jquery如何指定哪个droppable应该与嵌套的droppable元素一起使用

2 个答案:

更新