Определить, находится ли координаты сброса над другим элементом, используя Vue.js?

Question

Я использую компонент vue-draggable-resizable , который даст координаты смещения x, y относительно того, где мой элемент был отброшен на странице (что все отлично работает).Тем не менее, я хотел бы знать, есть ли способ определить, перекрывают ли координаты отбрасывания другой элемент.В основном у меня есть страницы, сложенные на странице, и я хотел бы знать, на какую страницу был перетащен элемент, чтобы я мог обновить номер страницы, к которой принадлежит элемент.

Итак, мой вопрос: как я могу определить,данные координаты x, y перекрывают другой элемент?

Answer 1

Вы можете использовать эти координаты отбрасывания с document.elementFromPoint(x,y).Ключ должен отключить pointer-events для <vue-draggable-resizable> * , перетаскивающих элемент , чтобы document.elementFromPoint(x,y) мог захватить элемент внизу.

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

демо