I've been trying to retrieve the element over which a "drop" event occurs, but I keep getting unexpected results. It consistently returns parent elements instead of the actual child element where the dragged element is dropped on.
<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' }"
...
The JavaScript snippet below corresponds to the issue mentioned above (the page number alert always shows as undefined)...
onDragStop(x, y) {
//...
const el = document.elementFromPoint(x, y);
alert("Dropped onto page number: " + el.dataset.pageNumber);
}