a-collapse 拖拽排序

`a-collapse` 是Ant Design Vue库中的一个组件，它主要用于创建折叠面板，用户可以点击展开或折叠内容。拖拽排序功能通常与Vue的`draggable`属性结合使用，允许用户通过拖动`a-collapse`组件的内容来进行元素的顺序调整。

当你在一个包含多个`a-collapse`的列表中启用`draggable`，比如`<el-collapse-item draggable>`，用户就可以将它们拖放到新的位置。当释放鼠标时，会触发`@drop`和`@change`事件，你可以监听这些事件处理排序后的更新操作。

例如：

<template>
  <el-collapse v-model="activeNames" ref="collapse">
    <el-collapse-item
      v-for="(item, index) in panels"
      :key="item.id"
      :title="item.title"
      @dragstart="onDragStart"
      @dragover="allowDrop"
      @drop="onDrop"
    >
      <p>{{ item.content }}</p>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1'],
      panels: [
        { id: '1', title: '折叠项一', content: '内容一' },
        { id: '2', title: '折叠项二', content: '内容二' },
        // ...
      ],
    };
  },
  methods: {
    onDragStart(item) {
      this.currentDraggingItem = item;
    },
    allowDrop(e) {
      e.preventDefault();
    },
    onDrop(e) {
      const draggedItem = this.currentDraggingItem;
      const currentIndex = this.panels.findIndex(i => i.id === draggedItem.id);
      const targetIndex = e.target.dataset.index;
      
      if (currentIndex !== targetIndex) {
        this.$refs.collapse.moveItem(currentIndex, targetIndex);
        // 更新当前拖动的项目
        this.currentDraggingItem = null;
      }
    },
  },
};
</script>