[Vuejs]-Adding drag out functionality to VueDraggable (sortable.js)

by

0👍

✅

This is the solution I came up with using getBoundingClientRect() function and adding a Drag event listener that updates x and y variables.

TS Snippet

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 Snippet

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

Leave a comment