检测两个div是否重叠[重复]答案

【问题标题】：Detecting whether two divs overlap [duplicate]检测两个div是否重叠[重复]
【发布时间】：2012-12-10 08:51:54
【问题描述】：

可能重复：
How to detect if two divs touch with jquery?

我花了很多时间试图弄清楚如何检测两个 div 是否重叠。
我尝试了gamequery插件并像这样使用它：

$("#" + checkform).collision("#" + checkform + "w").each(function(){
    alert("Collision");
});

您是否会使用 gamequery 插件和/或您将如何使用？

【问题讨论】：

标签： javascript jquery html collision gamequery

【解决方案1】：

在每个元素上使用getBoundingClientRect()，看看它们是否以这种方式重叠。不需要 jQuery。

【讨论】：

【解决方案2】：

这里已经有一个查询有答案：How to detect if two divs touch with jquery?

作为参考，我在这里复制代码：

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;
    }

【讨论】：

我希望您将此问题标记为与另一个问题重复。