AntDesign vue 结合 vuedraggable 实现拖拽排序功能

Ant Design Vue 是一个基于 Vue.js 的 UI 组件库，而 vuedraggable 是一个 Vue.js 的拖放组件。两者结合使用，可以实现拖拽排序的功能。

首先，需要在项目中安装 Ant Design Vue 和 vuedraggable：

npm install ant-design-vue vuedraggable --save

接着，在需要使用拖拽排序功能的组件中，引入 vuedraggable 组件：

<template>
  <div>
    <draggable v-model="list" :options="{handle:'.drag-handle'}">
      <div v-for="(item, index) in list" :key="item.id">
        <span class="drag-handle">☰</span>
        {{ item.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
      ],
    };
  },
};
</script>

在上述示例中，我们使用了 v-model 绑定了一个数组 `list`，这个数组里面包含了需要排序的元素。然后，在 `draggable` 组件中，我们使用了 `v-for` 循环渲染了每个元素，并且给每个元素添加了一个拖拽的句柄（也就是 `drag-handle` 类的元素）。

最后，我们还需要在 `options` 属性中传入一个选项对象，这个对象包含了一个 `handle` 属性，它指定了拖拽句柄的 CSS 选择器。

这样，我们就可以通过拖拽句柄来实现拖拽排序了。当用户拖动一个元素时，它会被移动到新的位置上，并且 `list` 数组中对应的元素顺序也会发生改变。