0

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

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

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

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

PS - 此示例中的调整大小不起作用，但在我的开发环境中起作用。

生锈和马克，谢谢你的回复。

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

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

有板的空间是唯一可以在没有任何事情发生的情况下丢弃图像的地方。拖动的图像可以捕捉回 dropbox2 div。如果图像被拖到 dropbox div 上，图像应该恢复。

4

2 回答 2

2

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

jQuery('#dropbox2').droppable({
    greedy: true,
    drop: function(event, ui) {
        // ...
    }
});
于 2012-06-29T15:16:31.877 回答
0

您的代码在外部有这个<div>：

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

这表示将revert选项设置为true当您拖动到外部时<div>。但是，当您放入较小的 时<div>，该选项仍设置为true。您需要做的就是revert在您的 inner 成功放置后更改可拖动元素上的值<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 文档说：

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

这听起来像你在找什么。你仍然需要改变revert你的可拖动属性，因为greedy它只在你的 droppables 上设置并且不会影响你的可拖动反应。

于 2012-06-29T14:42:43.347 回答