react拖拽依赖库react-dnd

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

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

第一步安装依赖并引入

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

使用对应的组件包装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>
1
2
3
4
5
6
7
8
9
10

拖拽目标

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

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

  <div ref={drag} key={key}>
    {title}
  </div>
1
2
3

拖拽释放目标

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

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

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