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

我正在使用vue-可拖动-可调整大小 https://github.com/mauricius/vue-draggable-resizable组件将给出 x,y 偏移坐标，说明我的元素在页面上的放置位置（一切都很好）。但是，我想知道是否有办法确定放置坐标是否与另一个元素重叠。我基本上将页面堆叠在页面上，并且想知道该元素被放置在哪个页面上，以便我可以更新该元素所属的页码。

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

您可以将这些放置坐标与document.elementFromPoint(x,y) https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/elementFromPoint。关键是禁用pointer-events https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events on <vue-draggable-resizable>'s dragging https://github.com/mauricius/vue-draggable-resizable#classnamedragging元素使得document.elementFromPoint(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() */
}