jquery - 有没有一种方法可以使通过jQuery Draggable [等等]进行拖动时div彼此不重叠？

有没有一种方法可以使div通过jquery draggable()拖动时彼此不重叠？

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

基本上，我正在创建一个 Canvas ，用户可以在其中自由地在站点周围移动站点的内容，但是在移动它们时不必与其他内容重叠。有任何想法吗？

最佳答案

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