antd的多个Collapse如何拖拽排序，使用dnd-kit实现

Ant Design (antd) 的 Collapse 组件本身并不直接支持 drag and drop（拖放）功能的自定义排序。但是，你可以结合 dnd-kit 这个第三方库来实现这个需求。首先，你需要安装 dnd-kit 和相关的依赖：

npm install react-dnd react-dnd-html5-backend dnd-core dnd-middleware-store

然后，按照以下步骤操作：

1. 导入必要的模块并创建 DragSource 或 DropTarget:

import { DragSource, DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import { ItemTypes as DND_ITEM_TYPES } from './dnd-types'; // 创建一个包含你想要拖动项类型的枚举

const DragSourceCollapsible = DragSource(DND_ITEM_TYPES.COLLAPSE, {
  beginDrag(props) {
    return { id: props.collapsible.id };
  },
  endDrag: () => {},
})(props => <Collapsible {...props} />);

2. 对 Collapse 实现 Droppable:

const { Droppable, Draggable } = require('dnd-core');
const DroppableCollapsibleList = Droppable(DND_ITEM_TYPES.LIST, {
  collect: monitor => ({
    isDragging: monitor.isDragging(),
  }),
  canDrop: (props, monitor) => !props.isDragging,
  drop(item, monitor) {
    const dragIndex = item.index;
    const dropIndex = monitor.getItem().index;

    // 更新列表的顺序，这里只是一个示例，实际应用中需要保存到 state 或者数据库
    if (dragIndex !== dropIndex) {
      moveItem(dragIndex, dropIndex);
    }
  },
})(props => (
  <div>
    {props.children.map((collapsible, index) =>
      <Draggable key={collapsible.id} index={index}>
        <DragSourceCollapsible collapsible={collapsible} />
      </Draggable>
    )}
  </div>
));

在这个例子中，`moveItem` 是一个假设存在的函数，用于更新 Collapse 的数据结构，比如数组的索引。