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

Question

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

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

Answer 1

您可以将这些放置坐标与 document.elementFromPoint(x,y) 一起使用。关键是禁用 pointer-events 上<vue-draggable-resizable>的dragging元素使得 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() */
}

demo