React 元素拖拽教程 react-dnd 实现拖拽

2026/9/10 18:30:52 拓冰建站浏览量

React元素拖拽能力教程

h5原生的拖拽处理起来过分的繁琐，而社区已经提供了成熟的库 react-dnd 来帮助我们实现这些细节，我们只需要关心业务逻辑即可。

下面的内容主要是适用于单个元素的拖拽，从一个容器中拖入另外一个容器中，没有实现真正的DOM层面的运动，实际是通过拖拽的事件监听操纵数据层的变化，从而触发页面的渲染导致得更新，注意！没有真正的dom移动那么炫酷的效果

一个完整的拖拽流程分为两部分：拖动+放置
下面进行展示

1、安装依赖

npm i react-dndnpm i react-dnd-html5-backend

安装主要的拖拽库 react-dnd，第二个依赖是html5的拖拽库，在前一个依赖中需要用到第二个，因 pc端 和 移动端 的 dom 层存在不同的事件监听和处理方式。所以 dnd 将这部分单独抽出来。方便后续的扩展。

react-dnd-html5-backend：用于控制 html5 事件的 backend。
react-dnd-touch-backend：用于控制移动端 touch 事件的 backend。
react-dnd-test-backend：用户可参考自定义的 backend。

2、创建拖拽的容器

顾名思义，所有的拖拽都必须在这个容器中发生，只需要把拖拽的dom都包裹住就行

import { HTML5Backend } from react-dnd-html5-backend";
import { DndProvider } from "react-dnd";<DndProvider backend={HTML5Backend}><Component/>
</DndProvider>;

从 react-dnd 中导出 DndProvider，包裹要实现拖动和放置的区域。

3、创建拖拽区域，拖拽组件

先DndProvider下面放置拖动组件和放置组件，这个主页面用于布局


import { HTML5Backend } from react-dnd-html5-backend";
import { DndProvider } from "react-dnd";// CustDrag:拖动组件 CustDrop:放置组件
import CustDrag from "./CustDrag.jsx";
import CustDrop from "./CustDrop.jsx";// 布局左右结构（没有写css 自己幻想一下）
const DndPage = () => {return (<DndProvider backend={HTML5Backend}><div className={styles.center}><CustDrag /></div><div className={styles.center}><CustDrop/></div></DndProvider>);
};

4、CustDrag 拖动组件

主要是用到了 useDrag 的hook，其中参数

type 拖动类型，当有多个的时候，这个是用来一一对应的
item 携带的数据，当前放置的时候会接受到这个数据
collect 返回一个对象，用于该hook的第一个参数，供页面使用

具体的可以去网上查询

import { useDrag } from "react-dnd";const CustDrag = () => {const [{ opacity }, dragRef] = useDrag({type: "Field",item: '我是拖拽数据',collect: (monitor) => ({opacity: monitor.isDragging() ? 0.5 : 1,}),});return (<div ref={dragRef} style={{ opacity, cursor: "move" }}>这个是拖拽对象</div>);
};

5、CustDrop:放置组件

使用 useDrop 参数如下

accept 接受类型，与上面的组件对应
drop 放置的事件，这时候可以获取到拖拽组件传过来的数据data
collect 收集拖动事件在放置区的数据。比如：是否有成功的拖动到放置区上、是否已经开始拖动，距离放置区的坐标等。并且将监听的数据传递到 useDrop 第一个参数来。