如何检测两个div与jQuery的接触？

我只是开发一个简单的气球游戏与两个div。 问题是，当两个div彼此接触时，我无法触发一个函数。

Answer 1

您正在寻找边界框碰撞检测。 如果你想提出一个事件，你必须反复testing，但是最好是从你的游戏循环中运行你的所有游戏对象的function。 沙盒位于http://jsfiddle.net/nGRwt/7/

function collision($div1, $div2) { var x1 = $div1.offset().left; var y1 = $div1.offset().top; var h1 = $div1.outerHeight(true); var w1 = $div1.outerWidth(true); var b1 = y1 + h1; var r1 = x1 + w1; var x2 = $div2.offset().left; var y2 = $div2.offset().top; var h2 = $div2.outerHeight(true); var w2 = $div2.outerWidth(true); var b2 = y2 + h2; var r2 = x2 + w2; if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false; return true; } 

Answer 2

你可以尝试jQuery碰撞加jquery-ui-draggable-collision 。 全面披露：我刚刚在sourceforge上发表了这些内容。

第一个允许这样做：

 var hit_list = $("#collider").collision(".obstacle"); 

这是与“#collider”重叠的所有“障碍物”的列表。

第二个允许：

 $("#collider").draggable( { obstacle: ".obstacle" } ); 

这给你（除其他外），一个“碰撞”事件绑定到：

 $("#collider").bind( "collision", function(event,ui){...} ); 

你甚至可以设置：

 $("#collider").draggable( { obstacle: ".obstacle", preventCollision: true } ); 

以防止“#collider”在拖动时重叠任何“。障碍物”。