react拖拽依赖库react-dnd

注：对于表格自定义行可以拖拽和树自定义节点可以拖拽等比较适用，其余的拖拽处理可以使用dragstart，drop等js原生事件来实现

react-dnd使用方法很简单，直接上干货

第一步安装依赖并引入

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from "react-dnd-html5-backend"

使用对应的组件包装html结构，html结构需包含拖拽目标和拖拽释放目标

<CountContext.Provider value={[]}><DndProvider backend={HTML5Backend}><div className={styles['drop-target']}><DropTarget/></div><div className={styles['drag-target']}><DragTarget/></div></DndProvider>
</CountContext.Provider>

拖拽目标

import { useDrag } from 'react-dnd';
const [, drag] = useDrag({type: "Box",item: { data: { ...需要携带的数据} },});

*一定要给拖拽目标添加useDrag返回的对象drag

  <div ref={drag} key={key}>{title}</div>

拖拽释放目标

import { useDrop } from "react-dnd"
const [, drop] = useDrop({accept: 'Box',collect: () => { },drop: (item: any) => {//item.data 为拖拽目标携带的数据 处理业务逻辑},
})

一定要给释放的目标添加useDrop返回的对象drop，这样就可以在拖拽悬浮时收到可释放的拖拽样式

<div ref={drop} className={styles['table-container']}>...
</div>