Problem:
I had a large list that a user could reorder by dragging and dropping. All work beautifully.
Except persisting the changes to the database. I did not want the an API call for every drop action or a button that the user clicked that said, “Save list”.
Solution:
Its a Vue.js project and the drag and drop had two events called “start” and “end”. These would call the corresponding methods below.
“endDrag” starts a timer that will run the supplied method in 1.5 seconds after the dragging has stopped. If the user starts “dragging” again the timer is cancelled
methods: {
endDrag(): void {
this.timer = setTimeout(this.distpatchOrderedList, 1500);
this.drag = false;
},
startDrag(): void {
clearTimeout(this.timer);
this.drag = true;
},
distpatchOrderedList(): void {
// Do some magic
}
}