Question

场景：我有一个父<div>元素，用于加载绝对定位的子<p>元素。
所有这些<p>元素都是从数据库中动态加载的，因此无法预测父div的子元素数量 - 它们的位置或宽度（每次都是不同的数字）。

我使用this page中的代码来检测2个<p>子元素何时重叠，但是，我想要实现的是检测多个元素之间的重叠（或碰撞）元素（我需要观察许多元素并检测每次碰撞）。

这是我用来检测两个元素的代码：

＆＃13;

function collidesWith(element1, element2) {
    var Element1 = {};
    var Element2 = {};

    Element1.top = $(element1).offset().top;
    Element1.left = $(element1).offset().left;
    Element1.right = Number($(element1).offset().left) + Number($(element1).width());
    Element1.bottom = Number($(element1).offset().top) + Number($(element1).height());

    Element2.top = $(element2).offset().top;
    Element2.left = $(element2).offset().left;
    Element2.right = Number($(element2).offset().left) + Number($(element2).width());
    Element2.bottom = Number($(element2).offset().top) + Number($(element2).height());

    if (Element1.right > Element2.left && Element1.left < Element2.right && Element1.top < Element2.bottom && Element1.bottom > Element2.top) {
        alert('Elements collide');
    }
}

＆＃13;

如何对其进行修改以使其与我的方案兼容？

Answer 1

以下是根据您的方案剪辑的编辑代码。请务必在使用前阅读并理解，因为我在这里做了很多改变

function collidesWith() {
  var element = $('#parent p');

  element.each(function(index, val) {
    if ($(this).prev().length) {
      var Element1 = $(this).prev();
      var Element2 = $(this);
      Element1Top = $(this).prev().offset().top;
      Element1Left = $(this).prev().offset().left;
      Element1Right = Number(Element1Left) + Number($(this).prev().outerWidth());
      Element1Bottom = Number(Element1Top) + Number($(this).prev().outerHeight());

      Element2Top = $(this).offset().top;
      Element2Left = $(this).offset().left;
      Element2Right = Number(Element2Left) + Number($(this).outerWidth());
      Element2Bottom = Number(Element2Top) + Number($(this).outerHeight());

      if (Element1Right > Element2Left) {
        $(this).css('left', Element1Right);
      }

    }
  });
}

collidesWith();

body{
 margin: 0;
}
#parent {
  position: relative;
}

p {
  background-color: #333333;
  color: #ffffff;
  margin: 0;
  padding: 15px;
  position: absolute;
  box-sizing: border-box;
}

p:nth-child(2n) {
  background-color: #4a4a4a;
}

<div id="parent">
  <p>1st Element</p>
  <p>2nd Element</p>
  <p>3rd Element</p>
  <p>4th Element</p>
  <p>5th Element</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jQuery / JS：检测多个子元素的重叠或碰撞

1 个答案: