Reorder array elements on drag-n-drop?

Question

Vue.js

Hello. A list of tasks that is taken from the VUEX repository, tasks can be rearranged by drag-n-drop. How to update the array in storage depending on the position of the task at the moment. Todo list

Answer 1

We include Vue.Draggable .
Add a setter to the allTasks computed property:

allTasks: {
  get() {
    return this.$store.state.tasks;
  },
  set(val) {
    this.$store.commit('allTasks', val);
  },
},

And we add a wrapper to the list in the form of a draggable component:

draggable.tasks__wrap(v-model="allTasks")
  ...

https://jsfiddle.net/sLmw2tbp/