请推荐一个处理可拖动元素的碰撞检测的 JQuery 插件 [关闭]

Posted 2023-05-08

【中文标题】请推荐一个处理可拖动元素的碰撞检测的 JQuery 插件 [关闭]

【英文标题】：Please recommend a JQuery plugin that handles collision detection for draggable elements [closed]

【发布时间】：2010-10-20 21:32:45

【问题描述】：

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

【参考方案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”重叠。

【讨论】：

我刚刚下载了你的对撞机脚本，太棒了！我将如何让一个 DIV 网格在悬停时增长，并让其他（未悬停的）div 随着悬停的 div 增长而缩小？

感谢您的回复。我正在尝试实现这种效果（adidas.com/us/homepage.asp）。如您所见，随着一个盒子变大，其他盒子缩小以适应它的大小。我认为碰撞检测是最好的方法，因为我需要盒子在一个盒子增长的方向上缩小，你的插件可以检测到（N S E 和 W）。

我正在尝试将您的“jquery-ui-draggable-collision”实施到我的项目中，但是当我第一次加载您的文件时出现错误，我猜我使用的是 jquery 1.6 .4 和 jqueryui-1.8.16，在您的示例代码中，您使用的是 jquery1.5.1。你能告诉我这是否是它对我不起作用的原因吗？谢谢。

另外，这个请求是在另一个线程上发出的，仅供参考。 ***.com/questions/1964812/…

好的，谢谢你的指点

【参考方案2】：

出现 jQuery 插件的快速搜索：

Collidable Draggables

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

【参考方案3】：

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

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

【参考方案4】：

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

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

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

这个谷歌搜索可以给你几个其他的选择：

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

【参考方案5】：

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

$.event.special.drop

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

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