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

Javascript Jquery如何指定哪个droppable应该与嵌套的droppable元素一起使用,javascript,jquery,html,jquery-ui-draggable,jquery-droppable,Javascript,Jquery,Html,Jquery Ui Draggable,Jquery Droppable,我有一个小问题,我自己似乎解决不了。 看看这把小提琴: 这是我遇到的问题的一个基本例子。 我有一个很大的潜水舱,这是一个可降落的区域。在该可拖放区域内有多个其他可拖放区域 当元素被删除时,内部可删除区域应该遍历其代码。相反,来自外部div的代码似乎正在运行。 我做错什么了吗?div周围的区域应该保持这种方式,因为元素可以放置在这里(不是正式的放置) 我希望我的问题足够清楚,但我认为小提琴手是自说自话的 附言——在本例中,调整大小不起作用,但在我的开发环境中起作用 锈迹斑斑, 谢谢你的回复 我很

我有一个小问题,我自己似乎解决不了。 看看这把小提琴:

这是我遇到的问题的一个基本例子。 我有一个很大的潜水舱,这是一个可降落的区域。在该可拖放区域内有多个其他可拖放区域

当元素被删除时,内部可删除区域应该遍历其代码。相反,来自外部div的代码似乎正在运行。 我做错什么了吗?div周围的区域应该保持这种方式,因为元素可以放置在这里(不是正式的放置)

我希望我的问题足够清楚,但我认为小提琴手是自说自话的

附言——在本例中,调整大小不起作用,但在我的开发环境中起作用


锈迹斑斑, 谢谢你的回复

我很抱歉让人搞糊涂了。我刚从代码中删除了它。

我只是想澄清一下。box div是一个包含多个图像的容器。我正在努力实现以下目标: 灰色虚线框是我示例中的dropbox2 div。 这些下拉框周围的空间是dropbox div

有电路板的空间是唯一可以在没有任何事情发生的情况下放下图像的地方。 拖动的图像可以捕捉回dropbox2 div。
如果将图像拖到dropbox div上,则图像应还原。

您的代码将此信息用于外部

这表示当您拖动到外部
时,将
还原
选项设置为
true
。但是,当您输入较小的
时,该选项仍然设置为
true
。您只需在内部
成功拖放后更改可拖动元素上的
还原值:

更新: Mark指出,我的解决方案不会阻止事件向父容器的传播。正如他的回答所示,您需要在初始选项中添加
greedy:true
。报告说:

如果为true,将阻止嵌套可拖放上的事件传播


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

在内部可拖动设备上设置
greedy:true
选项将防止事件发生在外部可拖动设备上:

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

由于您询问的是拖放,因此我将从您的JSFIDLE示例中删除调整大小的代码。这将使它更简单,并且不容易出现未使用代码的问题。Mark和我对外部div感到困惑。您说它应该接受drop,但您的JSFIDLE代码强制还原。您的目标是什么?您的解决方案不会阻止外部div上的drop处理程序运行。@MarkEirich-哈哈,而且您的解决方案不会更改
revert
属性,因此drop会恢复。我们需要结合我们的答案:)。我不清楚在外分区上的水滴需要什么样的行为。。。“div周围的区域应该保持这种状态,因为元素可以放在这里(不是正式的掉落)。@MarkEirich-是的,我对此也有点困惑。听起来他想把东西扔到那里,但他的代码说要拒绝掉东西。这是解决这个问题的最后一个提琴手。只供其他人使用。
$("#dropbox2").droppable({
    drop: function(event, ui) {
        ui.draggable.position( { of: $(this), my: 'center', at: 'center' } );
        // Add this line
        ui.draggable.draggable( 'option', 'revert', false );
    }
}); 
jQuery('#dropbox2').droppable({
    greedy: true,
    drop: function(event, ui) {
        // ...
    }
});