Добавление функции перетаскивания в VueDraggable (sortable.js)

Question

Я использую VueDraggable для чистой и простой работы с сортировкой некоторых элементов. Однако я хочу определить, когда элемент, который я перетаскиваю, оставляет своего родителя, чтобы я мог выполнить функцию. Примером может служить браузер, такой как вкладки Firefox или Chromes, и как они сортируются, когда вы перемещаете их влево или вправо, но вырвутся, если их перетянуть.

Однако не поддерживается в библиотеке. Я не хочу включать еще один полный пакет для этого и не нашел хороших альтернатив, которые бы хорошо работали в Vue2 +.

Фрагмент разметки

<draggable
  @start="onStart"
  @end="onEnd"
  @sort="onSort">
    <div> 
      element to drag
    </div>
</draggable>

Так, как я мог сделать это чистым способом?

Answer 1

Это решение, которое я придумал, используя функцию getBoundingClientRect () и добавив прослушиватель событий Drag, который обновляет переменные x и y.

Фрагмент TS

private xPosition: number = 0
private yPosition: number = 0
private eventListener?: any    

public onStart() {
  this.eventListener = this.mousePosition.bind(this)
  document.addEventListener('drag', this.eventListener)
}

public onEnd() {
  document.removeEventListener('drag', this.eventListener)

  const draggableElement = this.$refs.draggableElement as any
  const viewport: DOMRect = draggableElement.$el.getBoundingClientRect()

  if (
    this.yPosition > viewport.bottom ||
    this.xPosition > viewport.right ||
    this.xPosition < viewport.left ||
    this.yPosition < viewport.top)
  ) {
    // execute dropped outside whatever here
  }
}

private mousePosition(event: DragEvent) {
  this.xPosition = event.clientX
  this.yPosition = event.clientY
}

Фрагмент HTML

<draggable
  ref="draggableElement"
  @start="onStart"
  @end="onEnd">
  <div> drag this </div>
</draggable>