Javascript document.elementFromPoint(x,y)未报告正确的子元素
,我应该能够获取发生元素丢失的元素。然而,它报告的是非常奇怪和随机的结果,这些结果似乎总是父元素,而不是拖放的元素所在的实际子元素 下面显示了相关的代码片段Javascript document.elementFromPoint(x,y)未报告正确的子元素,javascript,vue.js,vuejs2,drag-and-drop,Javascript,Vue.js,Vuejs2,Drag And Drop,,我应该能够获取发生元素丢失的元素。然而,它报告的是非常奇怪和随机的结果,这些结果似乎总是父元素,而不是拖放的元素所在的实际子元素 下面显示了相关的代码片段 <div> <div id="sidebar"> <drag :transfer-data="{ type: 'textbox', width: 330, height: 50 }" class="draggable-item" >Textbox <
<div>
<div id="sidebar">
<drag :transfer-data="{ type: 'textbox', width: 330, height: 50 }" class="draggable-item"
>Textbox
<div slot="image" class="drag-image"><div class="field-container" style="width: 330px;height: 50px;">Texbox</div></div></drag
>
</div>
<div id="pages-container" @click.self="deselectAll();">
<b-alert show variant="info" class="text-center">Drag controls from the left sidebar to the pages below.</b-alert>
<drop
class="page-container"
v-for="(p, index) in pages"
@drop="onDrop"
@click.self="deselectAll();"
:data-page-number="p.pageNumber"
:key="p.pageNumber + '_page_' + index"
:style="{ width: p.width + 'px', height: p.height + 'px' }"
>
<img src="https://www.kirupa.com/flash/images/single_column_text.png" width="100%" height="100%" :data-page-number="p.pageNumber" @click.self="deselectAll();" />
<div style="position: absolute;top:0;bottom:0;left:0;right:0;background-color:white;opacity:0" :data-page-number="p.pageNumber" @click.self="deselectAll();"></div>
<vue-draggable-resizable
:id="f.id"
:style="{ 'z-index': '1044 !important' }"
:class="{ 'field-container grabbable': true, selected: f.isSelected }"
v-for="(f, f_index) in getPageFields(fields, p.pageNumber)"
:key="f.id"
:min-width="20"
:min-height="20"
:x="f.left"
:y="f.top"
:w="f.width"
:h="f.height"
:parent="false"
:z-index="f.isSelected ? '1045 !important' : '1044 !important'"
:prevent-deactivation="true"
:active.sync="f.isSelected"
@resizestop="onResizeStop"
@dragstop="onDragStop"
@activated="onActivated(f.id);"
@clicked="onActivated(f.id);"
>id: {{ f.id }} <br />
page: {{ p.pageNumber }} fieldIndex: {{ f_index }} selected: {{ f.isSelected }}</vue-draggable-resizable
>
</drop>
</div>
</div>
正如@Joao所指出的,document.elementFromPoint需要视口坐标,但VuedRaggableResizeable根据其配置的锁宽比和相对于初始放置元素的边界提供偏移坐标。您仍然可以通过从可拖动项本身获取视口坐标
步骤:
添加一个将创建对DragTable的引用数组的,并更新dragstop处理程序,以获取我们将在下一步中与适用引用一起使用的索引:
//模板
问题是,获取的坐标和onDragStop上可用的坐标是相对于要将对象放置到的区域的起点的。尽管我尝试了一点,但我以前没有使用Vue的经验,因此找不到解决方案,但从本质上说,如果您计划使用elementFromPoint方法,您需要一种方法来查找视口坐标。我必须在分配页码之前解析页码,以便该字段不会消失。但它工作得很好。我现在只需要弄清楚如何在新页面上找到正确的位置,我会很好的。你认为用数学先减去一页的高度会更容易吗?还是我应该只减去新容器页的偏移量?谢谢我把它掉在另一页了。我必须找出它被放在第二页的位置,这样我才能将它移到第二页,并更新该页上的相对坐标。仅供参考,我已经用一个确定视口坐标的更简单解决方案更新了答案。关于另一页上的落差坐标:我不认为应该考虑高度,因为高度需要考虑边界/边距/填充等。相反,我将从可拖动的坐标中减去目标元素的坐标。请参阅更新的演示,其中包含offsetX和offsetY的console.log。
onDragStop(x, y) {
//...
const el = document.elementFromPoint(x, y);
alert("Dropped onto page number: " + el.dataset.pageNumber);
}