React DnD：实现拖拽功能的终极方案？

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

前端徐徐

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

阅读量682

点赞数 16

分类专栏：宝藏工具文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/github_39132491/article/details/144902454

版权

宝藏工具专栏收录该内容

13 篇文章

订阅专栏

本文首发同名微信公众号：前端徐徐

大家好，我是徐徐。今天跟大家分享一个强大的 React 拖拽库：React DnD。

前言

在开发现代 web 应用时，实现复杂的拖拽交互已成为提升用户体验的关键因素。无论是构建类似 Trello 的看板应用，还是需要在应用不同部分之间传输数据的场景，一个灵活且强大的拖拽工具可以大大提高开发效率和用户体验。今天，我们要分享的是 React DnD 这个功能丰富的 React 库，它可以帮助你轻松创建复杂的拖拽界面。

基本信息

GitHub：https://github.com/react-dnd/react-dnd
文档：React DnD
类别：用户界面工具
Star：20.9 K

什么是 React DnD？

React DnD 是一套 React 实用工具，旨在帮助开发者构建复杂的拖拽界面，同时保持组件的解耦。它特别适用于像 Trello 和 Storify 这样的应用，在这些应用中，拖拽操作在应用的不同部分之间传输数据，并且组件会根据拖拽事件改变其外观和应用状态。

主要特点

与 React 组件无缝集成：通过高阶组件或 hooks 注入拖拽相关的 props。
拥抱单向数据流：完全符合 React 的声明式渲染范式，非常适合 Redux 等架构。
屏蔽平台差异：处理 HTML5 拖拽 API 的各种陷阱和浏览器不一致性。
可扩展和可测试：支持自定义后端，如触摸事件或鼠标事件，以及模拟后端用于测试。

使用场景

看板应用：如 Trello 风格的任务管理系统。
列表重排序：可拖拽的待办事项列表或优先级排序。
组件库：构建可拖拽的 UI 组件，如日历、甘特图等。
复杂的数据交互：在应用的不同部分之间通过拖拽传输数据。

快速上手

要在你的项目中使用 React DnD，只需以下简单步骤：

安装 React DnD

npm install react-dnd react-dnd-html5-backend

基本使用示例

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag(
    () => ({
      type: ItemTypes.CARD,
      item: { text },
      collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.5 : 1
      })
    }),
    []
  )
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>

  )
}

设置 DnD 上下文

import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'

function App() {
  return (
    <DndProvider backend={HTML5Backend}>
      {/* 你的应用组件 */}
    </DndProvider>

  )
}