Javascript：移动一个DIV并在它'；它完全在另一个分区内？

我必须创建一个用户界面，用户可以单击按钮，通过单击4个按钮以预设增量移动DIV（灰色框）。此外，我需要检测他们何时将其完全“移到”另一个DIV（红色虚线）中

移动div似乎很简单，但我不知道检测灰色框是否完全位于虚线框内的最佳方法

我可以用HTML或SVG来做这个广告，但我所有的研究都显示了相互矛盾的结果，尽管检测交叉点似乎很简单，但我没有发现检测完全包含在不同的rect的边界中

欢迎对方法提出建议。

您需要使用

const选项={
root:document.querySelector（“容器选择器”），
rootMargin:'0px'，
阈值：1.0
}
const targetToWatch=document.querySelector（“内部项选择器”）；
让回调=（条目，观察者）=>{
entries.forEach（entry=>{
//每个条目描述了一个观察到的交叉点的变化
//目标要素：
//entry.boundingClientRect
//入口.交叉比
//entry.intersectionRect
//entry.isIntersecting
//entry.rootBounds
//进入目标
//进场时间
});
};
const observer=新的IntersectionObserver（回调，选项）；
观察者观察（目标观察）；

---

然后，您需要检查各种

条目。

参数，以了解元素是否在内部。

如果给您一道数学题，给出矩形的坐标和大小，并且您有铅笔和纸，您会怎么做？我假设您有左上角坐标和宽度/高度？它很简单：

gray.x>red.x&&gray.x+gray.w

与y&h相同。