使用 Vue.js 确定放置坐标是否在另一个元素上? [英] Determine if drop coordinates is over another element using Vue.js?

问题描述

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

I'm using the vue-draggable-resizable component that will give the x,y offset coordinates as to where my element was dropped on the page (that all works great). However, I would like to know if there's a way to the determine if the drop coordinates overlaps another element. I basically have pages stacked down the page and would like to know which page the element was dropped over so I can update the page number that the element belongs to.

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

So, my question is, how can I determine if a given x,y coordinates is overlapping another element?

推荐答案

您可以将这些放置坐标与 document.elementFromPoint(x,y).关键是禁用 pointer-events 在 的 拖动 元素，以便 document.elementFromPoint(x,y) 可以抓取下面的元素.

You could use those drop coordinates with document.elementFromPoint(x,y). The key is to disable pointer-events on <vue-draggable-resizable>'s dragging element so that document.elementFromPoint(x,y) can grab the element underneath.

// 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() */
}

演示

这篇关于使用 Vue.js 确定放置坐标是否在另一个元素上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！