jquery - 有没有办法让 div 在通过 jquery draggable [或 etc..] 拖动时不会相互重叠？

Question

有没有办法让 div 在通过 jquery draggable() 拖动时不重叠？

我有一堆用户可以拖动的 div，但我不能让它们相互重叠。

基本上我正在创建一个画布，用户可以在其中自由移动网站的内容，但在移动它们时它不需要与其他内容重叠。有任何想法吗？

score 2 · Accepted Answer

您可以尝试jquery-collision加上jquery-ui-draggable-collision。完全披露：我刚刚在 sourceforge 上编写并发布了这些内容。

第一个允许这样做：

var hit_list = $("#collider").collision(".obstacle");

这是与“#collider”重叠的所有“.obstacle”的列表。

第二个允许：

$("#collider").draggable( { obstacle: ".obstacle" } );

这给了你（除其他外）一个“碰撞”事件来绑定：

$("#collider").bind( "collision", function(event,ui){...} );

你甚至可以设置：

$("#collider").draggable( { obstacle: ".obstacle", preventCollision: true } );

以防止“#collider”在拖动时与任何“.obstacle”重叠。

score 1 · Accepted Answer

我自己从未使用过这个插件，但它看起来可能是你的答案：Collidable Draggables。

score 0 · Accepted Answer

可拖动的ui效果需要进入jquery代码。代码中必须有一行元素的 z-index 被更改为一个非常高的数字，以便它出现在所有其他元素之上。您可以删除这条线，它应该使元素在拖动时不会改变它们的垂直层。

我会在 ui 文件中查找“z-index”。

score 0 · Accepted Answer

为什么不使用.css('z-index')或zIndex不确定。处理重叠研磨。- 给出需要在底部较小的元素的值，例如：1 - 给出需要在顶部较大的元素的值，例如：3 - 如果您需要拖动的元素介于两者之间，请给出它的值为 2。

或者你可以在 css 上使用它作为 z-index 控制它们重叠的类

score 0 · Accepted Answer

我建议你使用 draggble 的 zIndex 选项

$( ".selector" ).draggable({ zIndex: 100 });

5 回答 5