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
Source:stackexchange.com