react-dnd 拖拽能力教程

前言

近几年来，低代码、零代码的热度在国内逐年递增。“复杂度同力一样不会消失，也不会凭空产生，它总是从一个物体转移到另一个物体或一种形式转为另一种形式”。用户在使用低零代码构建应用程序时，这些能力只是被平台研发人员提前编写完了。

作为低零代码的基础，前端拖拽能力就尤为重要。

一个完整的拖拽流程分为两部分：拖动+放置

让一个元素支持拖动是一件非常容易做到的事情，只需要在对应的 dom 节点增加 draggable="true" 的属性即可。

真正麻烦的是放置的能力。我们需要监听 ondragstart、ondragenter、ondragover 等各个阶段的事件，处理起来过分的繁琐。而社区已经提供了成熟的库 react-dnd 来帮助我们实现这些细节，我们只需要关心业务逻辑即可。

本文将手把手带着小伙伴们掌握拖拽能力，并且提供 demo 让小伙伴们能够更细致的研究。

一、创建拖拽容器

首先进入到项目中，安装该能力需要用到的依赖。

pnpm i react-dnd

pnpm i react-dnd-html5-backend 

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

<DndProvider backend={HTML5Backend}><App />
</DndProvider>; 

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

初次使用 dnd 库的小伙伴肯定对 react-dnd-html5-backend 存在疑惑。并且不理解 DndProvider 为什么要传递一个 backend。这里来解释下什么是 backend。

因 pc端 和 移动端 的 dom 层存在不同的事件监听和处理方式。所以 dnd 将这部分单独抽出来。方便后续的扩展。

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

接下来要创建一个拖动区和放置区：

pages/dnd/index.jsx

// 忽略部分内容，小伙伴们自行补齐
import { CustDrag, CustDrop } from "@/components";

const dndList = [{ label: "标签1", value: "值1" },{ label: "标签2", value: "值2" },{ label: "标签3", value: "值3" },
];

const DndPage = () => {const [list, setList] = useState(dndList);return (<DndProvider backend={HTML5Backend}><div className={styles.center}><span>请拖拽：</span><div style={
  { border: "1px solid #000", minHeight: "200p