使用vuedraggable拖拽后，怎么排列序号

在Vue.js中，使用`vuedraggable`库进行拖拽排序后，你可以通过监听`drag-end`事件来获取元素的新顺序并更新它们的数据状态。这里是一个基本的步骤：

1. 首先，在你的Vue组件中安装`vuedraggable`库，并在需要排序的列表元素上添加它的指令：

<draggable :list="items" :move='handleDragEnd'>
  <div v-for="(item, index) in items" :key="index">
    {{ item.id }} ({{ index + 1 }})
  </div>
</draggable>

2. 定义数据结构`items`，它应该包含每个元素以及对应的初始排序位置：

data() {
  return {
    items: [
      { id: '1', position: 0 },
      { id: '2', position: 1 },
      //...
    ]
  };
},

3. 编写`handleDragEnd`函数来处理排序后的操作：

methods: {
  handleDragEnd(e) {
    const newList = e.newIndex.map((index) => this.items[index]);
    this.items = newList;
  }
}

在这个函数中，`e.newIndex`数组表示每个元素的新索引，你需要将其映射回原数组来更新实际的顺序。

4. 最后，记得在模板中使用`v-model`绑定`items`，以便双向数据绑定：

<template>
  <div>
    <draggable ... v-model="items"></draggable>
  </div>
</template>

现在当你拖动元素时，会实时地改变`items`数组中元素的位置，它们的序号也就跟着变了。