web-dev-qa-db-ja.com

要素が他の要素と重なっているかどうかを確認する方法は？

2つのdiv要素があります。それぞれの幅と高さは450ピクセルです。最初のdivが2番目のdivに重なっているかどうかを確認するにはどうすればよいですか？

私はjavascript hittestを使用しようとしましたが、少し複雑です。私はそれが実際にどのように機能するかを調べようとしているので、より簡単なコードから始めたいと思います。

。getClientRectsを使用して要素の境界を取得できることがわかりましたが、境界を比較する方法が正確にはわかりません。

教えてください！

javascriptboundary
47
Moon

rect1およびrect2getBoundingClientRect（） で取得

var overlap = !(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)

説明：括弧内の1つ以上の式がtrueである場合、重複はありません。すべてがfalseである場合、重複している必要があります。

85
Buu Nguyen

ここに数日前に作ったものがあります：https://Gist.github.com/yckart/7177551

var AABB = {
  collide: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return !(
      rect1.top > rect2.bottom ||
      rect1.right < rect2.left ||
      rect1.bottom < rect2.top ||
      rect1.left > rect2.right
    );
  },

  inside: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return (
      ((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
      ((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
      ((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
      ((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
    );
  }
};
14
yckart

element.getBoundingClientRect（）は現代のブラウザでは静かで、画面に相対的な境界を提供します。 look here バウンディングボックスが重なるかどうかをテストするよりも単純なジオメトリです...

すみません...あなたの編集が遅すぎました...

2
philipp

Internet Explorerバージョン8より前では、返される TextRectangle オブジェクトには物理ピクセルサイズの座標が含まれていますが、バージョン8以降は論理ピクセルサイズの座標が含まれています。

要素全体の境界矩形が必要な場合は、 getBoundingClientRect メソッドを使用します。

1
Vishal Suthar