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

【问题标题】：Resetting a Vue.js list order of all items after drag and drop拖放后重置所有项目的 Vue.js 列表顺序
【发布时间】：2016-01-19 16:23:27
【问题描述】：

我有一个拖放组件（使用 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 更新。

【问题讨论】：

标签： javascript drag-and-drop jquery-ui-sortable vue.js

【解决方案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。

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

【讨论】：

IMO，这个例子应该在可拖动的文档中。

【解决方案2】：

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

用法：

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

演示：

小提琴：example 1, example 2

GitHub：Vue.Dragable.For

【讨论】：