vue elemet拖拽排序，代码

以下是基于 Vue 和 Element-UI 实现的拖拽排序代码：

<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-card>
          <h3>Sortable List One</h3>
          <draggable v-model="list1" :options="{group:'items', animation:150}" @end="onDragEnd">
            <div v-for="(item, index) in list1" :key="item.id" class="list-item">
              {{ item.name }}
            </div>
          </draggable>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <h3>Sortable List Two</h3>
          <draggable v-model="list2" :options="{group:'items', animation:150}" @end="onDragEnd">
            <div v-for="(item, index) in list2" :key="item.id" class="list-item">
              {{ item.name }}
            </div>
          </draggable>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <h3>Sortable List Three</h3>
          <draggable v-model="list3" :options="{group:'items', animation:150}" @end="onDragEnd">
            <div v-for="(item, index) in list3" :key="item.id" class="list-item">
              {{ item.name }}
            </div>
          </draggable>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list1: [
        { id: 1, name: 'List Item 1' },
        { id: 2, name: 'List Item 2' },
        { id: 3, name: 'List Item 3' },
        { id: 4, name: 'List Item 4' },
        { id: 5, name: 'List Item 5' }
      ],
      list2: [
        { id: 6, name: 'List Item 6' },
        { id: 7, name: 'List Item 7' },
        { id: 8, name: 'List Item 8' },
        { id: 9, name: 'List Item 9' },
        { id: 10, name: 'List Item 10' }
      ],
      list3: [
        { id: 11, name: 'List Item 11' },
        { id: 12, name: 'List Item 12' },
        { id: 13, name: 'List Item 13' },
        { id: 14, name: 'List Item 14' },
        { id: 15, name: 'List Item 15' }
      ]
    }
  },
  methods: {
    onDragEnd(event) {
      console.log(event)
    }
  }
}
</script>

<style>
.list-item {
  background-color: #ebebeb;
  padding: 10px;
  margin-bottom: 10px;
}
</style>

在这个示例中，我们使用了 `vuedraggable` 库来实现拖拽排序功能。每个列表都由一个 `draggable` 组件包含，并且使用 `v-for` 指令渲染列表中的每个项目。

我们还向 `draggable` 组件传递了一些选项，例如 `group` 和 `animation`。这些选项用于指定不同列表之间的拖拽行为和动画效果。

当拖拽操作结束时，我们可以使用 `@end` 事件来监听 `vuedraggable` 发出的事件，并执行一些自定义逻辑。在这个示例中，我们只是简单地打印了事件对象的内容。