前言
近几年来,低代码、零代码的热度在国内逐年递增。“复杂度同力一样不会消失,也不会凭空产生,它总是从一个物体转移到另一个物体或一种形式转为另一种形式”。用户在使用低零代码构建应用程序时,这些能力只是被平台研发人员提前编写完了。
作为低零代码的基础,前端拖拽能力就尤为重要。
一个完整的拖拽流程分为两部分:拖动+放置
让一个元素支持拖动是一件非常容易做到的事情,只需要在对应的 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: "200px" }}>
{
list.map((item) => {
return <CustDrag key={
item?.value} data={
item} />;
})}
</div>
<div style={
{
marginTop: "10px" }}>请放置:</div>
<CustDrop onChange={
dropChange} />
</div>
</DndProvider>
);
};
二、拖动能力
接下来实现第一个核心能力:
components/CustDrag/index.jsx
import {
useDrag } from "react-dnd";
const CustDrag: FC<CustDragProps> = ({
data })