javascript - 请推荐一个处理可拖动元素碰撞检测的 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 插件出现：

可碰撞的 Draggables

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

Answer 3

我知道这个问题已经很老了，但也许你会发现这个问题很有用：我们的Collision Check Plugin for jQuery。

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

Answer 4

谷歌告诉我gameQuery，一个JQuery插件，有一个“碰撞”功能：

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 是被拖动的对象。

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