javascript - 如何知道一个 div 是否完全包含到另一个

Question

如何识别一个 div 是否完全包含在另一个 div 中？我有 2 个 div 说 A 和 B。我需要知道当我拖动到 A 时 A 完全包含在 B 中，并且不与 A 重叠

Answer 1

使用可以使用IntersectionObserver为了这个任务。

let options = {
  root: document.querySelector('#container'),
  rootMargin: '0px',
};

let callback = entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio >= 1) {
      console.log("#" + entry.target.id + " is fully inside #container");
    }
    else {
      console.log("#" + entry.target.id + " is NOT fully inside #container");
    }
  });
};

let observer = new IntersectionObserver(callback, options);
observer.observe(document.querySelector('#inner'));
observer.observe(document.querySelector('#outer'));

#container {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
}

#inner, #outer {
  width: 50px;
  height: 50px;
  background: green;
  position: absolute;
}

#outer {
  background: red;
  right: -10px;
}

<div id="container">
  <div id="inner"></div>
  <div id="outer"></div>
</div>