Ant Design Vue 拖拽排序

Ant Design Vue 提供了一个可以实现拖拽排序的组件 - `<a-draggable>`。

使用方法如下：

1. 首先安装 `ant-design-vue`：

npm install ant-design-vue --save

2. 在需要使用的组件中引入 `a-draggable`：

<template>
  <div>
    <a-draggable class="drag-wrapper" :list="list" :item-key="item => item.id">
      <div v-for="item in list" :key="item.id" class="drag-item">{{ item.content }}</div>
    </a-draggable>
  </div>
</template>

<script>
import { ADraggable } from 'ant-design-vue';

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

在上面的示例中，我们首先引入了 `ADraggable` 组件，并将其注册到当前组件中。然后在模板中使用 `a-draggable` 标签包裹要进行拖拽排序的元素，其中 `list` 是要排序的数据列表，`item-key` 属性用来指定每个元素的唯一标识符。

在 `a-draggable` 组件内部，我们使用 `v-for` 指令遍历 `list` 中的数据，并将每个元素渲染为一个 `div` 标签。这里要注意，我们给每个 `div` 标签指定了 `key` 属性，这样可以帮助 Vue 更好地追踪每个元素的变化。

最后，在样式中定义好拖拽排序元素的样式即可：

.drag-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.drag-item {
  width: 200px;
  height: 100px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

这样就实现了一个简单的拖拽排序功能。