Поменять порядок элементов массива при drag-n-drop?

Question

[Артур]

Всем привет. Список задач, который берется из хранилища VUEX, задачи можно переставлять drag-n-drop. Как обновить массив в хранилище в зависимости от позиции задачи на данный момент. Todo list

Comments

[alex]

в чем кайф юзать pug в vue, объясните? это какая-то особая разновидность извращения или что? а для драг-дропа есть специальная обертка для vue

[Артур]

это какая-то особая разновидность извращения или что

Мне казалось душные люди только в твиттере. Ошибался :(

Answer 1

[0xD34F]

Подключаем Vue.Draggable.

Вычисляемому свойству allTasks добавляем сеттер:

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

И добавляем списку обёртку в виде компонента draggable:

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

https://jsfiddle.net/sLmw2tbp/