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

Resetting a Vue.js list order of all items after drag and drop(拖放后重置所有项目的Vue.js列表顺序)

问题描述

我有一个拖放组件(使用Sortable)，但我想不出在项目拖放到新位置后更新列表顺序的逻辑。

Code(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)');
    }
  }
});

我有一个可以工作的JSFdle：https://jsfiddle.net/jackbarham/rubagbc5

我希望同步数组中的order，以便在项目被删除后进行AJAX更新。

推荐答案

这不是最优雅的解决方案，但我认为它有效。这使用可排序的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。

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

这篇关于拖放后重置所有项目的Vue.js列表顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！