有没有办法让div通过jquery draggable 拖动时彼此不重叠？

有没有办法让div通过jquery draggable（）拖动时彼此不重叠？

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

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

Answer 1

您可以尝试jquery-collision plus 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”重叠。

Answer 2

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

Answer 3

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

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

Answer 4

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

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

Answer 5

我建议你使用draggble的zIndex选项

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

http://api.jqueryui.com/draggable/#option-zIndex