前言
近几年来,低代码、零代码的热度在国内逐年递增。“复杂度同力一样不会消失,也不会凭空产生,它总是从一个物体转移到另一个物体或一种形式转为另一种形式”。用户在使用低零代码构建应用程序时,这些能力只是被平台研发人员提前编写完了。
作为低零代码的基础,前端拖拽能力就尤为重要。
一个完整的拖拽流程分为两部分:拖动+放置
让一个元素支持拖动是一件非常容易做到的事情,只需要在对应的 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", minHeigh