vue list 拖动排序js

Vue.js提供了一个非常方便的库`sortable.js`，可以轻松实现拖动排序的功能。下面是使用`sortable.js`实现Vue.js列表拖动排序的示例代码：

1. 首先，需要在HTML页面中引入`sortable.js`和`Vue.js`库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 然后在Vue实例中定义一个数组，用于存储列表数据：

new Vue({
  el: '#app',
  data: {
    items: [
      { text: 'Item 1' },
      { text: 'Item 2' },
      { text: 'Item 3' },
      { text: 'Item 4' },
      { text: 'Item 5' }
    ]
  }
});

3. 在HTML页面中定义一个包含`v-for`指令的列表：

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
  </ul>
</div>

4. 最后，在Vue实例的`mounted`钩子函数中，使用`Sortable`库创建一个可拖动排序的列表：

new Vue({
  el: '#app',
  data: {
    items: [
      { text: 'Item 1' },
      { text: 'Item 2' },
      { text: 'Item 3' },
      { text: 'Item 4' },
      { text: 'Item 5' }
    ]
  },
  mounted: function() {
    new Sortable(document.querySelector('ul'), {
      animation: 150,
      ghostClass: 'sortable-ghost',
      chosenClass: 'sortable-chosen',
      dragClass: 'sortable-drag',
      onEnd: function(evt) {
        var item = this.items.splice(evt.oldIndex, 1)[0];
        this.items.splice(evt.newIndex, 0, item);
      }.bind(this)
    });
  }
});

在上面的代码中，我们使用`Sortable`库创建了一个可拖动排序的列表，并在`onEnd`回调函数中更新了Vue实例中的`items`数组，以保证列表的顺序与Vue实例中的数据一致。

这就是使用`sortable.js`实现Vue.js列表拖动排序的方法。