写一个vue拖动组件排序

好的，这里是一个简单的 Vue 拖拽排序组件的示例代码。这个组件可以让用户通过拖拽列表项来重新排序它们。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="item.id" :draggable="true"
          @dragstart="dragStart(index)" @dragover="dragOver(index)"
          @dragend="dragEnd">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, text: "Item 1" },
        { id: 2, text: "Item 2" },
        { id: 3, text: "Item 3" },
        { id: 4, text: "Item 4" },
        { id: 5, text: "Item 5" }
      ],
      draggingItem: null
    };
  },
  methods: {
    dragStart(index) {
      this.draggingItem = this.list[index];
    },
    dragOver(index) {
      if (this.draggingItem === null) {
        return;
      }
      const draggingIndex = this.list.indexOf(this.draggingItem);
      if (index !== draggingIndex) {
        this.list.splice(draggingIndex, 1);
        this.list.splice(index, 0, this.draggingItem);
      }
    },
    dragEnd() {
      this.draggingItem = null;
    }
  }
};
</script>

这个组件的实现基于 HTML5 的拖放 API。在模板中，我们使用 `v-for` 指令来渲染列表项，并为每个列表项绑定拖放事件。在 `dragStart` 方法中，我们记录正在拖拽的列表项。在 `dragOver` 方法中，我们根据拖拽位置重新排序列表项。最后，在 `dragEnd` 方法中，我们清空正在拖拽的列表项。