JQuery 可拖动 - 无重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3482388/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery draggable - No overlap
提问by Peter
is it possible to say "draggable div's -> no overlap" ?
是否可以说“可拖动 div -> 无重叠”？
I think the mainproblem is the position:absolute; ... right?
我认为主要问题是位置：绝对；... 对？
kind reagards Peter
亲切的问候彼得
采纳答案by Nick Craver
There isn't a built-in function for collision detection in jQuery UI draggable, unless you're actually after something like sorting. The closest thing that's built-in to what you want is sortable's plceholder, which looks like this.
jQuery UI draggable 中没有用于碰撞检测的内置函数，除非您实际上是在进行排序之类的操作。最接近您想要的内置内容是 sortable 的 plceholder，它看起来像这样。
The short version is collision detection with every dragged element isn't trivial in terms of performance (depending on the number of elements), so it's left out of the library since it's a very rare request. You could however calculate the collisions yourself inside the draggable's drageventif you really do need the collision detection.
简短版本是每个拖动元素的碰撞检测在性能方面并不是微不足道的（取决于元素的数量），因此它被排除在库之外，因为它是一个非常罕见的请求。但是，如果您确实需要碰撞检测，您可以在可拖动的drag事件中自己计算碰撞。
回答by eruciform
You can try jquery-collisionplus jquery-ui-draggable-collision. Full disclosure: I just wrote and released these on sourceforge.
您可以尝试jquery-collision加上jquery-ui-draggable-collision。完全披露：我刚刚在 sourceforge 上编写并发布了这些。
The first allows this:
第一个允许：
var hit_list = $("#collider").collision(".obstacle");
which is the list of all ".obstacle" that overlap "#collider".
这是与“#collider”重叠的所有“.obstacle”的列表。
The second allows:
第二个允许：
$("#collider").draggable( { obstacle: ".obstacle" } );
Which gives you (among other things), a "collision" event to bind to:
这给你（除其他外），一个“碰撞”事件绑定到：
$("#collider").bind( "collision", function(event,ui){...} );
And you can even set:
你甚至可以设置：
$("#collider").draggable( { obstacle: ".obstacle", preventCollision: true } );
to prevent "#collider" from ever overlapping any ".obstacle" while dragging.
防止“#collider”在拖动时与任何“.obstacle”重叠。
