向VueDraggable (sortable.js)添加拖出功能

Question

我使用VueDraggable进行清理，并且易于对某些元素进行排序。但是，我希望检测我正在拖动的元素何时离开它的父元素，以便我可以执行一个函数。一个例子是像Firefox或Chromes选项卡这样的浏览器，以及当你向左或向右移动它们时，它们是如何排序的，但是如果拖出，它们就会被撕开。

但是，它是库中的不支持。我不想为此包括另一个完整的包，也没有找到任何在Vue2+中运行良好的好的替代方案。

标记片段

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

所以我怎么才能干净利落地做这件事呢？

Answer 1

这就是我提出的使用getBoundingClientRect()函数并添加一个更新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>