javascript - 检测到多 div 叠加的碰撞

Question

我想在我的元素中检测到多个 div 的碰撞。

请看下图:

1. 红框黑边是一个div
2. 红框是可移动的

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

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

Answer 1

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

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

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