[Vuejs]-How can i add a confirmation Pop up modal with Vue Draggable?

3👍

I don’t think you can achieve this by using onMove event. The onEnd event it seems more suitable but unfortunately it doesn’t have any cancel drop functionality.

So I think the only solution here is revert it back if the user decides to cancel.

You can listen on change event (See more in documentation)

<draggable
  group="tasks"
  v-model="column.tasks"
  @change="handleChange($event, column.tasks)">
  ...
</draggable>
...
<button @click="revertChanges">Cancel</button>
<button @click="clearChanges">Yes</button>

And

...
  handleChange(event, list) {
    this.changes.push({ event, list })
    this.modal = true
  },

  clearChanges() {
    this.changes = []
    this.modal = false
  },

  revertChanges() {
    this.changes.forEach(({ event, list }) => {
      if (event.added) {
        let { newIndex } = event.added
        list.splice(newIndex, 1)
      }

      if (event.removed) {
        let { oldIndex, element } = event.removed
        list.splice(oldIndex, 0, element)
      }

      if (event.moved) {
        let { newIndex, oldIndex, element } = event.moved
        list[newIndex] = list[oldIndex]
        list[oldIndex] = element
      }
    })

    this.changes = []
    this.modal = false
  }
...

JSFiddle example

Leave a comment