Jquery 如何指定哪个可丢弃对象应与嵌套的可放置元素一起使用

Jquery how to specify which droppable should be used with nested droppable elements

本文关键字：嵌套 元素 一起 何指定 对象 Jquery      更新时间：2023-09-26

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

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

当

元素被丢弃时，内部可放置区域应遍历其代码。相反，来自外部div 的代码似乎正在运行。我做错了什么吗？div 周围的区域应该保持这种状态，因为元素可以放置在这里（而不是正式删除）。

我希望我的问题足够清楚，但我认为小提琴手不言自明。

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

生锈和马克，感谢您的回复。

我很

抱歉令人困惑的调整器。我刚刚从代码中删除了它。新提琴手

只是为了澄清事情。盒子div 是一个包含多个图像的容器。我正在尝试实现以下目标：http://postimage.org/image/qwhtik04f/灰色虚线框是我示例中的 dropbox2div。这些投递箱周围的空间是投递箱div。

带有电路板的空间是唯一可以在不发生任何事情的情况下丢弃图像的地方。拖动的图像可以捕捉回 dropbox2div。如果将图片拖到保管箱div 上，图片应会还原。

在内部可放置对象上设置 greedy: true 选项将防止事件在外部可放置对象上发生：

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

你的代码对外部<div>有这个：

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

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

$("#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文档说：

如果为 true，则将阻止事件在嵌套可放置对象上传播。

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

相关文章：