Javascript 使用Vue.js确定放置坐标是否在另一个元素上？

我使用的组件将给出元素在页面上的放置位置的x，y偏移坐标（这一切都很好）。但是，我想知道是否有办法确定放置坐标是否与另一个元素重叠。我基本上把页面放在页面的下面，想知道元素放在了哪个页面上，这样我就可以更新元素所属的页码了

---

所以，我的问题是，如何确定给定的x，y坐标是否与另一个元素重叠？

可以使用这些放置坐标。关键是禁用

的元素，以便

document.element frompoint（x，y）

可以抓住下面的元素

// template
<vue-draggable-resizable @dragstop="onDragStop">

// script
methods: {
  onDragStop(x, y) {
    /* For example's sake, this element lookup is simplified in that
       only considers the top-left corner given by `(x,y)`, but
       you might want to evalute additional coordinates e.g., to meet
       a minimum threshold before overlap is verified. */
    const el = document.elementFromPoint(x, y);
    console.log(el);
  }
}

// style
.dragging {
  pointer-events: none; /* ignore for document.elementFromPoint() */
}

//模板
//剧本
方法：{
onDragStop（x，y）{
/*例如，此元素查找简化为
只考虑由`（x，y）`'给出的左上角，但是
您可能需要计算其他坐标，例如，以满足
验证重叠前的最小阈值*/
const el=document.elementFromPoint（x，y）；
控制台日志（el）；
}
}
//风格
.拖{
指针事件：无；/*对于document.elementFromPoint（）忽略*/
}

---

您需要知道每个元素的x、y、w、h，然后循环真实元素，并检查每个元素是否存在重叠。。如果你用x，y，w，h在纸上画两个元素，你可能会更好地理解是的，我知道我可以用一堆数学和循环来解决它，但我希望有一种更简单的方法是“内置的”。你是说？您所需要做的就是：当拖动事件开始时，直到它完成为止，您将所有页面（以及整个容器）都转换为拖放目标，并给它们的子项

指针事件：none

，这样就大大简化了拖放过程。使用此方法，您只需要在页面元素上侦听drop事件，而不需要在其任何子组件上侦听drop事件。这是最基本的，但远不是一件容易的事。而且，要明确的是：这与Vue无关。事实上，你在Vue中这样做完全不相关。在React、Angular、vanilla Javascript或jQuery中也是如此。原则上，Vue对DOM非常友好，并且与DOM兼容。我不明白为什么使用它的人觉得有必要问：“它在Vue中是如何完成的？”而不研究它在DOM中是如何完成的，就像轮子需要重新发明一样。在Vue中，95%以上的情况下，它与本机DOM完全相同。我甚至可以说这是Vue最强大的“超级大国”。@AndreiGheorghiu问题是我不知道我不知道的东西。我试图尽可能多地解释我的具体情况，这样就不必有人稍后回来说“哦，天哪，为什么你一开始没有提到你在使用Vue？”。如果Vue是“不相关的”，那么即使我提到了，你仍然可以回答这个问题。感谢上帝，感谢像tony19这样的了不起的人，他们在问题的背景下用伟大的例子回答问题，但我祝你十字军东征好运。；）非常感谢你，我现在肯定离你越来越近了。我的实际代码比您的工作示例稍微复杂一点，因此一些复杂性可能会把它搞砸，但如果您想尝试一下，我在这里的一个新问题中阐述了我的问题：