jquery - 有没有办法让div在通过jquerydraggable[或等等]拖动时不互相重叠？

Question

有没有办法让div在通过jquerydraggable()拖动时不互相重叠？

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

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

Answer 1

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

第一个允许这样做:

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

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

第二个允许:

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

这给你(除其他外)一个要绑定(bind)的“碰撞”事件:

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

您甚至可以设置:

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

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