Question

我想要我的项目，将碰撞检测到多个div。

请参见下图：

红色框和黑色边框为div
红色框可移动

如何检测红色框是否触及它周围的一个边框？

我尝试用帆布解决方案，但对我来说不是一个好方法。

Answer 1

我建议基于Element.getBoundingClientRect（documentation here）的解决方案。此方法返回具有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);

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

如果您需要帮助选择正确的元素或编写重叠方法，请告诉我。但是，在网上找到关于这些主题的内容已经很多......

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>

<强> SCRIPT

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

将碰撞检测到多重叠加

2 个答案: