react-dnd实现拖拽API学习

最新推荐文章于 2025-03-12 09:27:08 发布

认真的小孩有糖吃

最新推荐文章于 2025-03-12 09:27:08 发布

阅读量1.2k

点赞数 1

分类专栏：笔记 react-dnd 文章标签： reactjs

本文链接：https://blog.csdn.net/gaofeng6565/article/details/115696823

版权

笔记同时被 2 个专栏收录

11 篇文章

订阅专栏

react-dnd

2 篇文章

订阅专栏

本文介绍了React DnD库，它由React和Redux核心作者Dan Abramov创建，用于构建复杂的拖放接口。React DnD专注于拖放功能，不提供现成组件，遵循单向数据流，隐藏底层API问题，支持自定义后端和扩展测试。文中详细讲解了React DnD的基本概念，包括Backend、Item、Type、Monitor、Connector、DragSource、DropTarget以及DragDropContext和DragDropContextProvider。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网文档链接：https://react-dnd.github.io/react-dnd/docs/overview

React DnD 是什么？

React DnD是React和Redux核心作者 Dan Abramov创造的一组React 高阶组件，可以在保持组件分离的前提下帮助构建复杂的拖放接口。

React DnD 的需求

默认使用 HTML5 拖放API，但支持
不直接操作 DOM
DOM 和拖放的源和目标解耦
融入HTML5拖放中窃取类型匹配和数据传递的想法

React DnD 的特点

专注拖拽，不提供现成组件

React DnD提供了一组强大的原语，但它不包含任何现成组件，而是采用包裹使用者的组件并注入 props 的方式。它比jQuery UI等更底层，专注于使拖放交互正确，而把视觉方面的效果例如坐标限制交给使用者处理。这其实是一种关注点分离的原则，例如React DnD不打算提供可排序组件，但是使用者可以基于它快速开发任何需要的自定义的可排序组件。

单向数据流

类似于 React 一样采取声明式渲染，并且像 redux 一样采用单向数据流架构，实际上内部使用了 Redux

隐藏了平台底层API的问题

HTML5拖放API充满了陷阱和浏览器的不一致。 React DnD为您内部处理它们，因此使用者可以专注于开发应用程序而不是解决浏览器问题。

可扩展可测试

React DnD默认提供了HTML5拖放API封装，但它也允许您提供自定义的“后端(backend)”。您可以根据触摸事件，鼠标事件或其他内容创建自定义DnD后端。例如，内置的模拟后端允许您测试Node环境中组件的拖放交互。

为未来做好了准备

React DnD不会导出mixins，并且对任何组件同样有效，无论它们是使用ES6类，createReactClass还是其他React框架创建的。而且API支持了ES7 装饰器。

React DnD 的基本概念

Backend

React DnD 抽象了后端的概念，你可以使用 HTML5 拖拽后端，也可以自定义 touch、mouse 事件模拟的后端实现，后端主要用来抹平浏览器差异，处理 DOM 事件，同时把 DOM 事件转换为 React DnD 内部的 redux action。

Item

React DnD 基于数据驱动，当拖放发生时，它用一个数据对象来描述当前的元素，比如{ cardId: 25 }

Type

类型类似于 redux 里面的actions types 枚举常量，定义了应用程序里支持的拖拽类型。

Monitor

拖放操作都是有状态的，React DnD 通过 Monitor 来存储这些状态并且提供查询

Connector

Backend 关注 DOM 事件，组件关注拖放状态，connector 可以连接组件和 Backend ，可以让 Backend 获取到 DOM。

DragSource

将组件使用 DragSource 包裹让它变得可以拖动，DragSource 是一个高阶组件：

DragSource(type, spec, collect)(Component)

参数讲解：

type: 必填。字符串，ES6符号或返回给定组件的函数props。只有为相同类型注册的 drop targets 才会对此拖动源生成的项目做出反应
spec：必填。一个普通的JavaScript对象，上面有一些允许的方法。它描述了拖动源如何对拖放事件做出反应。
collect：必填。收集功能。它应该返回一个普通的对象注入你的组件。它接收两个参数：connect和monitor。
options：可选的。一个普通的对象。

DropTarget

将组件使用 DropTarget 包裹让它变得可以响应 drop，DropTarget 是一个高阶组件：

DropTarget(type, spec, collect)(Component)

参数讲解：

type: 必填。字符串，ES6符号或返回给定组件的函数props。此放置目标仅对指定类型的 drag sources 项目做出反应
spec：必填。一个普通的JavaScript对象，上面有一些允许的方法。它描述了放置目标如何对拖放事件做出反应。
collect：必填。收集功能。它应该返回一个普通的道具对象注入你的组件。它接收两个参数：connect 和 monitor。
options：可选的。一个普通的对象。

DragDropContext & DragDropContextProvider

注意： 使用 DragSource 和 DropTarget 包裹的组件，必须放在： DragDropContext 包裹的根组件内部，或者 DragDropContextProvider 根标签的内部。

DragDropContext

使用 DragDropContext 包装应用程序的根组件以启用 React DnD

参数

backend：必填。一个 React DnD 后端。除非您正在编写自定义的，否则建议使用 React DnD 附带的 HTML5Backend。
context：backend 依赖。用于自定义后端的上下文对象。例如，HTML5Backend可以为iframe场景注入自定义窗口对象。

DragDropContextProvider

作为 DragDropContext 的替代方法，您可以使用 DragDropContextProvider 元素为应用程序启用React DnD。与 DragDropContext 类似，这可以通过 backendprop 注入后端，但也可以注入一个 window 对象。

参数

backend：必填。一个 React DnD 后端。除非您正在编写自定义的，否则建议使用 React DnD 附带的 HTML5Backend。
context：backend 依赖。用于自定义后端的上下文对象。例如，HTML5Backend可以为iframe场景注入自定义窗口对象。