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

Question

我正在开发一个带有两个div的简单气球游戏.问题是当两个div相互接触时我无法触发功能.

Answer 1

您正在寻找边界框碰撞检测.如果你想提出一个事件,你必须反复测试,但最好只是在游戏循环中对所有游戏对象运行该功能.沙箱位于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-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".