请推荐一个JQuery插件来处理可拖动元素的冲突检测

Question

我们正在使用Draggable JQuery UI插件，需要禁止我们的元素之间重叠。我们自己可以编写一些碰撞检测，但更喜欢使用经过测试的包。有什么建议？

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插件了：

Collidable Draggables

看起来还早，但可能值得一试。

Answer 3

我知道这个问题很老了，但也许你会觉得这很有用：Collision Check Plugin for jQuery。

描述是德语，但它应该是不言自明的。您可以使用两个单个元素甚至元素集，并返回一组所有碰撞元素。

Answer 4

Google告诉我，jQuery插件gameQuery具有“碰撞”功能：

http://gamequery.onaluf.org/#manual

在上面的页面上搜索“碰撞”一词。

此谷歌搜索可以为您提供其他几个选项：

http://www.google.com/search?q=jquery+collision+detection

Answer 5

假设，但我认为你需要的东西可以在这里找到：

$.event.special.drop

它使用jQuery着名的$ .event.special.drag来创建de drop事件。你可以把自己的javascript代码放在 .bind( "drop", function( event ){ 此函数中的this元素表示已定义类“drop”的对象，event.dragTarget是被拖动的对象。

上面链接的网站上有更多文档。无论如何，这就是我所需要的。