vue2 写一个拖拽 排序的例子

在Vue2中实现拖拽排序功能，通常会结合`element-ui`库中的`draggable`组件，以及JavaScript的`Sortable`库。这里是一个简单的例子：

首先，你需要安装必要的依赖：

npm install element-ui @vue/cli-plugin-element ui-sortable

然后，在你的组件里引入并使用这些库：

<template>
  <div class="container">
    <ul v-bind:class="{ sortable: isSortable }" ref="list">
      <li v-for="(item, index) in items" :key="index"
          draggable="true"
          @dragstart.prevent="onDragStart(item, index)"
          @dragend="onDragEnd(index)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { Sortable } from 'ui-sortable';
export default {
  data() {
    return {
      items: [
        // 初始化的数据
        { name: 'Item 1', id: 1 },
        { name: 'Item 2', id: 2 },
        { name: 'Item 3', id: 3 }
      ],
      isSortable: false,
    };
  },
  methods: {
    onDragStart(item, index) {
      this.isSortable = true;
      Sortable.create(this.$refs.list, {
        group: '__items__', // 组名，用于识别哪些元素可以互相排序
        animation: 150,
        onEnd: (evt) => {
          const sortedItems = this.items.slice();
          sortedItems.sort((a, b) => a.id - b.id); // 按id排序，你可以替换为你需要的排序规则
          this.items = sortedItems;
          this.isSortable = false; // 结束拖放后恢复非排序状态
        }
      });
    },
    onDragEnd(index) {
      // 可能还需要在这里处理其他结束拖动后的操作
    },
  },
};
</script>

在这个例子中，我们创建了一个列表，每个项目都是可拖动的。当开始拖动时，我们开启排序模式，并在拖动结束后对数据进行排序。请注意，这个示例假设你已经设置了UI-Sortable插件。