JQuery 可拖动 - 无重叠

Question

是否可以说“可拖动的 div -> 没有重叠”？

我认为主要问题是位置：绝对； ... 正确的？

亲切的问候 彼得

Answer 1

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

Answer 2

jQuery UI Draggable 中没有用于碰撞检测的内置函数，除非您实际上在排序之类的事情之后。与您想要的最接近的内置内容是 sortable 的 plceholder，看起来像这样。

简而言之，每个拖动元素的碰撞检测在性能方面并不是微不足道的（取决于元素的数量），因此它被排除在库之外，因为这是一个非常罕见的请求。但是，您可以在 draggable 的 drag 事件内自行计算碰撞 如果您确实需要碰撞检测。