拖放后重置所有项目的 Vue.js 列表顺序

Question

我有一个拖放组件（使用 Sortable），但我无法弄清楚一旦将项目放入新位置后更新列表顺序的逻辑。

代码(Vue.js):

new Vue({
  el: '#app',
  template: '#dragdrop',
  data() {
    return {
      list: [
        {name: 'Item 1', id: 1, order: 0}, 
        {name: 'Item 2', id: 2, order: 1}, 
        {name: 'Item 3', id: 3, order: 2}, 
        {name: 'Item 4', id: 4, order: 3}, 
        {name: 'Item 5', id: 5, order: 4}, 
        {name: 'Item 6', id: 5, order: 5}, 
       ],
    }
  },
  ready() {
    Sortable.create(document.getElementById('sort'), {
      draggable: 'li.sort-item',
      ghostClass: "sort-ghost",
      animation: 80,
      onUpdate: function(evt) {
        console.log('dropped (Sortable)');
      }
    });
  },
  methods: {
    dropped() {
      console.log('dropped (Vue method)');
    }
  }
});

我有一个可用的 JSFiddle：https://jsfiddle.net/jackbarham/rubagbc5

我希望让数组中的 order 同步，这样我就可以在删除项目后进行 AJAX 更新。

Answer 1

这不是最优雅的解决方案，但我认为它可行。这使用 Sortable onUpdate 处理程序来更新底层数组。每当一个项目被拖到一个新位置时，它就会被移动到数组中的相同位置——这样视图模型就会与视图中显示的内容保持同步。然后项目 order 属性得到更新以匹配它们在数组中的新位置。

new Vue({
  el: '#app',
  template: '#dragdrop',
  data() {
    return {
      list: [
        {name: 'Item 1', id: 1, order: 0}, 
        {name: 'Item 2', id: 2, order: 1}, 
        {name: 'Item 3', id: 3, order: 2}, 
        {name: 'Item 4', id: 4, order: 3}, 
        {name: 'Item 5', id: 5, order: 4}, 
        {name: 'Item 6', id: 6, order: 5}, 
       ],
    }
  },
  ready() {
    var vm = this;
    Sortable.create(document.getElementById('sort'), {
      draggable: 'li.sort-item',
      ghostClass: "sort-ghost",
      animation: 80,
      onUpdate: function(evt) {
        console.log('dropped (Sortable)');
        vm.reorder(evt.oldIndex, evt.newIndex);
      }
    });
  },
  methods: {
    reorder(oldIndex, newIndex) {
      // move the item in the underlying array
      this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
      // update order properties based on position in array
      this.list.forEach(function(item, index){
        item.order = index;
      });
    }
  }
});

如果需要，您可以优化reorder()方法。

这是一个 updated version of your jsfiddle。

我觉得这是一种应该尝试打包到自定义指令中的功能，但我还没有弄清楚如何做到这一点。

Answer 2

我创建了一个 Vue.js ic 指令来以通用方式处理这种更新。它可以像 v-for 指令一样使用，但在视图模型数组上添加了拖放能力和相应的更新。

用法：

<div v-dragable-for="element in list">{{element.name}}</div>

演示：

.

Fiddle: example 1, example 2

GitHub: Vue.Dragable.For

拖放后重置所有项目的 Vue.js 列表顺序

Resetting a Vue.js list order of all items after drag and drop

javascript

drag-and-drop

jquery-ui-sortable

vue.js