检测多个div重叠的碰撞

Question

我希望你能为我的项目翻译，实现检测多个

之间的碰撞。

请参考下图:

1. 红色方框和黑色边框是一个

。 2. 红色方框可移动。

如何检测红色方框是否与其周围的边框接触？

我尝试使用画布解决，但这对我来说不是一个好的方法。

- P. Frank

Answer 1

我建议使用基于Element.getBoundingClientRect的解决方案（文档在此）。该方法返回一个包含6个属性的对象：top、bottom、left、right、width和height。您可以使用此方法查找您的<div>覆盖的区域。

其次，您需要创建一个检查两个区域是否重叠的方法：

var rectanglesOverlap = function(rec1, rec2) {
  // Return true if overlap, false if none  
}

一旦你已经存储了红色矩形并将所有黑色边框的div存储在一个数组中，你可以通过以下方式检查哪些矩形重叠：

var overlappingRects = blackRects.filter(rectanglesOverlap.bind(null, redRect);

< p > overlappingRects 数组的长度现在告诉您有多少个重叠。

如果您需要帮助选择正确的元素或编写重叠方法，请告诉我。但是关于这些主题已经有很多在线资料了...

- user3297291

Answer 2

虽然这不是确切的解决方案，但它似乎适用于可移动的 div 在给定的 div 交集区域中的情况。

可移动的 div 用 id #draggable 表示。所有用于交叉的其他 div 都使用 data-category="container" 属性进行选择。 HTML

<div data-category="container" style="width:200px;height:200px;border:3px solid #000; position:absolute;top:10;left:10"></div>
<div data-category="container" style="width:500px;height:300px;border:3px solid #000; position:absolute;top:100;left:100"></div>
<div data-category="container" style="width:400px;height:400px;border:3px solid #000; position:absolute;top:130;left:50"></div>
<div id="draggable" style="height:20px;width:30px;background-color:red;position:absolute;top:160;left:130"></div>

脚本。

  var minTop = Number.MAX_VALUE;
  var posTop, posLeft = 0;
  var minBottom = Number.MAX_VALUE;
  var minLeft = Number.MAX_VALUE;
  var minRight = Number.MAX_VALUE;

  $(document).ready(function()
  {
      //loop through intersection divs
      $('div[data-category=container]').each(function(){
        var diffTop = $('#draggable').offset().top - $(this).offset().top; //get distance between tops
        var diffLeft = $('#draggable').offset().left - $(this).offset().left; //get distance between lefts
        var diffBottom = ($(this).offset().top + $(this).height()) - ($('#draggable').offset().top + $('#draggable').height()); //get distance between bottoms
        var diffRight =  ($(this).offset().left + $(this).width()) - ($('#draggable').offset().left + $('#draggable').width()); //get distance between rights

        //store min top
        if (diffTop > 0 && diffTop < minTop)
        {
            minTop = diffTop;
            posTop = $(this).offset().top;
        }

        //store min left
        if (diffLeft > 0 && diffLeft < minLeft)
        {
            minLeft = diffLeft;
            posLeft = $(this).offset().left;
        }   

        //store min bottom
        if (diffBottom > 0 && diffBottom < minBottom)
        {
            minBottom = diffBottom;
        }   

        //store min right
        if (diffRight > 0 && diffRight < minRight)
        {
            minRight = diffRight;
        }           
      });

      //create div within the intersection area
      $("<div id = '#divFrame' style='border:3px solid blue;position:absolute;top:" + (posTop) + ";left:" + (posLeft) + ";width:" + (minLeft + minRight + $('#draggable').width()) + "px;height:" + (minTop + minBottom + $('#draggable').height()) + "px;'></div>").appendTo("body");
  });

以下是在给定的 HTML 上执行脚本时的外观。

如果您正在使用 JQueryUI，则可以使用 containment 选项来设置可拖动对象的边界，如下所示。

$( "#draggable" ).draggable( { containment: "#divFrame" } );

- rasso

---

哇，你的解决方案非常好。谢谢。现在我该如何为圆形div做同样的事情？请看我的更新。 - P. Frank

Ozgur基本上已经为您完成了所有的工作，现在您正在要求他做更多的事情...我建议首先尝试理解正在发生的事情。如果两个圆心之间的距离小于它们的半径之和，则两个圆重叠。 - user3297291