Determine If Drop Coordinates Is Over Another Element Using Vue.js?

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 l

Solution 1:

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">

// scriptmethods: {
  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