antd的多个Collapse如何拖拽排序

antd中的` Collapse `组件并不直接支持拖拽排序功能，它主要用于展示折叠面板的内容。然而，你可以结合其他第三方库如`react-beautiful-dnd`(React Beautiful DND)或者`sortablejs`来实现这样的功能。

以下是基本步骤：

1. 安装必要的库：

   npm install react-beautiful-dnd sortablejs

2. 导入并配置所需的组件和样式：

   import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
   import SortableHOC from 'sortablejs/react';

3. 将`Collapse`转换为可以拖动的项，创建`Draggable`和`Droppable`组件：

   const EnhancedCollapse = SortableHOC(Collapse, {
     onSortEnd: ({ oldIndex, newIndex }) => {
       // 在这里处理排序后的状态更新，例如更新state或API调用
     },
   });

   <DragDropContext onDragEnd={this.handleDragEnd}>
     <Droppable droppableId="collapsible-container">
       {(provided) => (
         <div {...provided.droppableProps} ref={provided.innerRef}>
           {this.state.collapseItems.map((item, index) => (
             <Draggable key={item.key} draggableId={item.id}>
               {(provided) => (
                 <EnhancedCollapse
                   key={index}
                   closable
                   accordion
                   {...provided.draggableProps}
                   {...provided.placeholder}
                   ref={provided.innerRef}
                 >
                   {item.content}
                 </EnhancedCollapse>
               )}
             </Draggable>
           ))}
           {provided.placeholder}
         </div>
       )}
     </Droppable>
   </DragDropContext>

4. 实现`handleDragEnd`函数，用于保存新的排序顺序到组件的状态或通过API更新服务器端的数据。