注:对于表格自定义行可以拖拽和树自定义节点可以拖拽等比较适用,其余的拖拽处理可以使用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>