Javascript：移動一個 DIV 並檢測它何時完全在另一個 DIV 中？

Question

我必須創建一個 UI，用戶可以在其中單擊按鈕以通過單擊 4 個按鈕以預設增量移動 DIV（灰色框）。 此外，我需要檢測他們何時將其完全“移入”另一個 DIV（紅色虛線）。

移動 div 似乎很簡單，但我對檢測灰色框是否完全在虛線框內的最佳方法感到困惑。

我可以做這個廣告 HTML 或 SVG，但我所有的研究都顯示出相互矛盾的結果，雖然檢測交叉點似乎很簡單，但我沒有發現檢測完全包含在不同矩形的邊界中。

對方法的建議表示贊賞。

Answer 1

您需要使用路口觀察員 API

const options = {
  root: document.querySelector('CONTAINER SELECTOR'),
  rootMargin: '0px',
  threshold: 1.0
}

const targetToWatch = document.querySelector('INSIDE ITEM SELECTOR');

let callback = (entries, observer) => {
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

const observer = new IntersectionObserver(callback, options);
observer.observe(targetToWatch);

然后您需要檢查各種entry. 參數來知道元素是否在里面。