react+ts 写拖拉拽

在React和TypeScript (TS) 中实现拖放功能通常需要借助一些库，如`react-beautiful-dnd`或`react-draggable`, 这些库提供了丰富的API和类型安全性。以下是基本步骤：

1. 安装依赖：

   npm install react-beautiful-dnd @types/react-beautiful-dnd --save

2. 创建DND组件：创建一个名为`Draggable`或`Item`的组件，它会有一个`onDrop`事件处理函数，用来处理拖放操作。

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

   interface Item {
     id: string;
     text: string;
   }

   const DraggableItem: React.FC<Item> = ({ id, text }) => {
     return (
       <Draggable handle="div" index={id}>
         {(provided) => (
           <div ref={provided.innerRef} {...provided.draggableProps} {...provided.placeholderProps}>
             {text}
             {provided.dragHandle()}
           </div>
         )}
       </Draggable>
     );
   };

   const DroppableArea: React.FC = () => {
     const [{ items }] = useDragDropContext();

     return (
       <Droppable droppableId="droppable">
         {(provided) => (
           <div ref={provided.innerRef} {...provided.droppableProps} style={{ border: '1px dashed grey' }}>
             {items.map((item, index) => (
               <DraggableItem key={index} id={item.id} text={item.text} />
             ))}
             {provided.placeholder}
           </div>
         )}
       </Droppable>
     );
   };

3. 使用钩子管理状态和事件处理：

   import { useDragDropContext } from 'react-beautiful-dnd';

   function App() {
     const [{ items }, dragDropActions] = useDragDropContext({
       onDragEnd: ({ item, result }) => {
         if (!result.destination) return;
         // 交换两个元素的位置
         const [oldIndex, newIndex] = [result.source.index, result.destination.index];
         dragDropActions.move(item.id, oldIndex, newIndex);
       },
     });

     // 初始化数据
     const initialItems: Item[] = [
       { id: '1', text: 'Item 1' },
       { id: '2', text: 'Item 2' },
     ];

     return (
       <>
         <DroppableArea items={items} />
         {/* 添加更多用于添加新项、删除项等的功能 */}
       </>
     );
   }