如何检测两个div是否与jquery接触？

Question

如何检测两个div是否与jquery接触？我正在开发一个带有两个div的简单气球游戏。问题是当两个div相互接触时我无法触发功能。

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

在原生Javascript中

var is_colliding = function(div1, div2) {
  var d1_height = div1.offsetHeight;
  var d1_width = div1.offsetWidth;
  var d1_distance_from_top = div1.offsetTop + d1_height;
  var d1_distance_from_left = div1.offsetLeft + d1_width;

  var d2_height = div2.offsetHeight;
  var d2_width = div2.offsetWidth;
  var d2_distance_from_top = div2.offsetTop + d2_height;
  var d2_distance_from_left = div2.offsetLeft + d2_width;

  var not_colliding =
    d1_distance_from_top < div2.offsetTop ||
    div1.offsetTop > d2_distance_from_top ||
    d1_distance_from_left < div2.offsetTop ||
    div1.offsetLeft > d2_distance_from_left;

  return !not_colliding;};