网站建设客户常见问题,多媒体展厅公司,广州免费自助建站开发,图片在线制作水印注#xff1a;对于表格自定义行可以拖拽和树自定义节点可以拖拽等比较适用#xff0c;其余的拖拽处理可以使用dragstart#xff0c;drop等js原生事件来实现
react-dnd使用方法很简单#xff0c;直接上干货
第一步安装依赖并引入
import { DndProvider } from react-dnd;…注对于表格自定义行可以拖拽和树自定义节点可以拖拽等比较适用其余的拖拽处理可以使用dragstartdrop等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//divdiv 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
