问题描述
限时送ChatGPT账号..我正在使用 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屋!
更多推荐
[db:关键词]
发布评论