跳到主要内容

基于react-dnd实现拖拽排序

拖拽是常见的需求，在 react 里我们会用 react-dnd 来做。

这节我们通过一个拖拽排序的案例来入门下 react-dnd。

npx create-react-app --template=typescript react-dnd-test

新建个 react 项目

安装 react-dnd 相关的包：

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

然后改一下 App.tsx

import "./App.css";

function Box() {
    return <div className="box"></div>;
}

function Container() {
    return <div className="container"></div>;
}

function App() {
    return (
        <div>
            <Container></Container>
            <Box></Box>
        </div>
    );
}

export default App;

css 部分如下：

.box {
    width: 50px;
    height: 50px;
    background: blue;
    margin: 10px;
}

.container {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
}

把它跑起来：

npm run start

是这样的：

现在我们想把 box 拖拽到 container 里，用 react-dnd 怎么做呢？

dnd 是 drag and drop 的意思，api 也分有两个 useDrag 和 useDrop。

box 部分用 useDrag 让元素可以拖拽：

function Box() {
    const ref = useRef(null);

    const [, drag] = useDrag({
        type: "box",
        item: {
            color: "blue",
        },
    });

    drag(ref);

    return <div ref={ref} className="box"></div>;
}

用 useRef 保存 dom 引用，然后用 useDrag 返回的第二个参数处理它。

至于 type 和 item，后面再讲。

然后是 Container：

function Container() {
    const ref = useRef(null);

    const [, drop] = useDrop(() => {
        return {
            accept: "box",
            drop(item) {
                console.log(item);
            },
        };
    });
    drop(ref);

    return <div ref={ref} className="container"></div>;
}

用 useDrop 让它可以接受拖拽过来的元素。

接收什么元素呢？

就是我们 useDrag 的时候声明的 type 的元素。

在 drop 的时候会触发 drop 回调函数，第一个参数是 item，就是 drag 的元素声明的那个。

只是这样还不行，还要在根组件加上 Context：

import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

const root = ReactDOM.createRoot(
    document.getElementById("root") as HTMLElement
);
root.render(
    <DndProvider backend={HTML5Backend}>
        <App></App>
    </DndProvider>
);

之前是直接渲染 App，现在要在外面加上 DndProvider。

这个就是设置 dnd 的 context的，用于在不同组件之间共享数据。

然后我们试试看：

确实，现在元素能 drag 了，并且拖到目标元素也能触发 drop 事件，传入 item 数据。

那如果 type 不一样呢？

那就触发不了 drop 了。

然后我们给 Box 组件添加一个 color 的 props，用来设置背景颜色：

并且给 item 的数据加上类型。

interface ItemType {
    color: string;
}
interface BoxProps {
    color: string;
}
function Box(props: BoxProps) {
    const ref = useRef(null);

    const [, drag] = useDrag({
        type: "box",
        item: {
            color: props.color,
        },
    });

    drag(ref);

    return (
        <div
            ref={ref}
            className="box"
            style={{ background: props.color || "blue" }}></div>
    );
}

添加几个 Box 组件试一下：

没啥问题。

然后我们改下 Container 组件，增加一个 boxes 数组的 state，在 drop 的时候把 item 加到数组里，并触发渲染：

function Container() {
    const [boxes, setBoxes] = useState<ItemType[]>([]);

    const ref = useRef(null);

    const [, drop] = useDrop(() => {
        return {
            accept: "box",
            drop(item: ItemType) {
                setBoxes((boxes) => [...boxes, item]);
            },
        };
    });
    drop(ref);

    return (
        <div ref={ref} className="container">
            {boxes.map((item) => {
                return <Box color={item.color}></Box>;
            })}
        </div>
    );
}

这里 setBoxes 用了函数的形式，这样能拿到最新的 boxes 数组，不然会形成闭包，始终引用最初的空数组。

测试下：

这样，拖拽到容器里的功能就实现了。

我们再加上一些拖拽过程中的效果：

useDrag 可以传一个 collect 的回调函数，它的参数是 monitor，可以拿到拖拽过程中的状态。

collect 的返回值会作为 useDrag 的返回的第一个值。

我们判断下，如果是在 dragging 就设置一个 dragging 的 className。

function Box(props: BoxProps) {
    const ref = useRef(null);

    const [{ dragging }, drag] = useDrag({
        type: "box",
        item: {
            color: props.color,
        },
        collect(monitor) {
            return {
                dragging: monitor.isDragging(),
            };
        },
    });

    drag(ref);

    return (
        <div
            ref={ref}
            className={dragging ? "box dragging" : "box"}
            style={{ background: props.color || "blue" }}></div>
    );
}

然后添加 dragging 的样式：

.dragging {
    border: 5px dashed #000;
    box-sizing: border-box;
}

测试下：

确实，这样就给拖拽中的元素加上了对应的样式。

但如果我们想把这个预览的样式也给改了呢？

这时候就要新建个组件了：

const DragLayer = () => {
    const { isDragging, item, currentOffset } = useDragLayer((monitor) => ({
        item: monitor.getItem(),
        isDragging: monitor.isDragging(),
        currentOffset: monitor.getSourceClientOffset(),
    }));

    if (!isDragging) {
        return null;
    }
    return (
        <div
            className="drag-layer"
            style={{
                left: currentOffset?.x,
                top: currentOffset?.y,
            }}>
            {item.color} 拖拖拖
        </div>
    );
};

useDragLayer 的参数是函数，能拿到 monitor，从中取出很多东西，比如 item、isDragging，还是有 clientOffset，也就是拖拽过程中的坐标。

其中 drag-layer 的样式如下：

.drag-layer {
    position: fixed;
}

引入下这个组件：

现在的效果是这样的：

确实加上了自定义的预览样式，但是原来的还保留着。

这个也可以去掉：

useDrag 的第三个参数就是处理预览元素的，我们用 getEmptyImage 替换它，就看不到了。

dragPreview(getEmptyImage());

这时候就只有我们自定义的预览样式了：

但其实这种逻辑只要执行一次就行，我们优化一下：

useEffect(() => {
    drag(ref);
    dragPreview(getEmptyImage(), { captureDraggingState: true });
}, []);

drop 的逻辑也同样：

useEffect(() => {
    drop(ref);
}, []);

这样，我们就学会了 react-dnd 的基本使用。

总结下：

  • 使用 useDrag 处理拖拽的元素，使用 useDrop 处理 drop 的元素，使用 useDragLayer 处理自定义预览元素
  • 在根组件使用 DndProvider 设置 context 来传递数据
  • useDrag 可以传入 type、item、collect 等。type 标识类型，同类型才可以 drop。item 是传递的数据。collect 接收 monitor，可以取拖拽的状态比如 isDragging 返回。
  • useDrag 返回三个值，第一个值是 collect 函数返回值，第二个是处理 drag 的元素的函数，第三个值是处理预览元素的函数
  • useDrop 可以传入 accept、drop 等。accept 是可以 drop 的类型。drop 回调函数可以拿到 item，也就是 drag 元素的数据
  • useDragLayer 的回调函数会传入 monitor，可以拿到拖拽的实时坐标，用来设置自定义预览效果

全部代码如下：

import { useDrag, useDragLayer, useDrop } from "react-dnd";
import "./App.css";
import { useEffect, useRef, useState } from "react";
import { getEmptyImage } from "react-dnd-html5-backend";

interface ItemType {
    color: string;
}
interface BoxProps {
    color: string;
}
function Box(props: BoxProps) {
    const ref = useRef(null);

    const [{ dragging }, drag, dragPreview] = useDrag({
        type: "box",
        item: {
            color: props.color,
        },
        collect(monitor) {
            return {
                dragging: monitor.isDragging(),
            };
        },
    });

    useEffect(() => {
        drag(ref);
        dragPreview(getEmptyImage());
    }, []);

    return (
        <div
            ref={ref}
            className={dragging ? "box dragging" : "box"}
            style={{ background: props.color || "blue" }}></div>
    );
}

function Container() {
    const [boxes, setBoxes] = useState<ItemType[]>([]);

    const ref = useRef(null);

    const [, drop] = useDrop(() => {
        return {
            accept: "box",
            drop(item: ItemType) {
                setBoxes((boxes) => [...boxes, item]);
            },
        };
    });

    useEffect(() => {
        drop(ref);
    }, []);

    return (
        <div ref={ref} className="container">
            {boxes.map((item) => {
                return <Box color={item.color}></Box>;
            })}
        </div>
    );
}

const DragLayer = () => {
    const { isDragging, item, currentOffset } = useDragLayer((monitor) => ({
        item: monitor.getItem(),
        isDragging: monitor.isDragging(),
        currentOffset: monitor.getSourceClientOffset(),
    }));

    if (!isDragging) {
        return null;
    }
    return (
        <div
            className="drag-layer"
            style={{
                left: currentOffset?.x,
                top: currentOffset?.y,
            }}>
            {item.color}拖拖拖
        </div>
    );
};

function App() {
    return (
        <div>
            <Container></Container>
            <Box color="blue"></Box>
            <Box color="red"></Box>
            <Box color="green"></Box>
            <DragLayer></DragLayer>
        </div>
    );
}

export default App;

css：

.box {
    width: 50px;
    height: 50px;
    background: blue;
    margin: 10px;
}

.dragging {
    border: 5px dashed #000;
    box-sizing: border-box;
}
.drag-layer {
    position: fixed;
}

.container {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
}

入了门之后，我们再来做个进阶案例：拖拽排序

我们写个 App2.tsx

import { useState } from "react";
import "./App2.css";

interface CardItem {
    id: number;
    content: string;
}

interface CardProps {
    data: CardItem;
}
function Card(props: CardProps) {
    const { data } = props;
    return <div className="card">{data.content}</div>;
}
function App() {
    const [cardList, setCardList] = useState<CardItem[]>([
        {
            id: 0,
            content: "000",
        },
        {
            id: 1,
            content: "111",
        },
        {
            id: 2,
            content: "222",
        },
        {
            id: 3,
            content: "333",
        },
        {
            id: 4,
            content: "444",
        },
    ]);

    return (
        <div className="card-list">
            {cardList.map((item: CardItem) => (
                <Card data={item} key={"card_" + item.id} />
            ))}
        </div>
    );
}

export default App;

还有 App2.css：

.card {
    width: 200px;
    line-height: 60px;
    padding: 0 20px;
    border: 1px solid #000;
    margin: 10px;
    cursor: move;
}

就是根据 cardList 的数据渲染一个列表。

把它渲染出来是这样的：

拖拽排序，显然 drag 和 drop 的都是 Card。

我们给它加上 useDrag 和 useDrop：

function Card(props: CardProps) {
    const { data } = props;

    const ref = useRef(null);

    const [, drag] = useDrag({
        type: "card",
        item: props.data,
    });
    const [, drop] = useDrop({
        accept: "card",
        drop(item) {
            console.log(item);
        },
    });

    useEffect(() => {
        drag(ref);
        drop(ref);
    }, []);

    return (
        <div ref={ref} className="card">
            {data.content}
        </div>
    );
}

接下来做的很显然就是交换位置了。

我们实现一个交换位置的方法，传入 Card 组件，并且把当前的 index 也传入：

const swapIndex = useCallback((index1: number, index2: number) => {
    const tmp = cardList[index1];
    cardList[index1] = cardList[index2];
    cardList[index2] = tmp;
    setCardList([...cardList]);
}, []);

这里 setState 时需要创建一个新的数组，才能触发渲染。

然后在 Card 组件里调用下：

增加 index 和 swapIndex 两个参数，声明 drag 传递的 item 数据的类型

在 drop 的时候互换 item.index 和当前 drop 的 index 的 Card

interface CardProps {
    data: CardItem;
    index: number;
    swapIndex: Function;
}

interface DragData {
    id: number;
    index: number;
}

function Card(props: CardProps) {
    const { data, swapIndex, index } = props;

    const ref = useRef(null);

    const [, drag] = useDrag({
        type: "card",
        item: {
            id: data.id,
            index: index,
        },
    });
    const [, drop] = useDrop({
        accept: "card",
        drop(item: DragData) {
            swapIndex(index, item.index);
        },
    });

    useEffect(() => {
        drag(ref);
        drop(ref);
    }, []);

    return (
        <div ref={ref} className="card">
            {data.content}
        </div>
    );
}

这样就实现了拖拽排序。

不过因为背景是透明的，看着不是很明显。

我们设置个背景色：

清晰多了。

但是现在是 drop 的时候才改变位置，如果希望在 hover 的时候就改变位置呢？

useDrop 有 hover 时的回调函数，我们把 drop 改成 hover就好了：

但现在你会发现它一直在换：

那是因为交换位置后，没有修改 item.index 为新的位置，导致交换逻辑一致触发：

在 hover 时就改变顺序，体验好多了。

然后我们再处理下拖拽时的样式。

样式如下：

.dragging {
    border-style: dashed;
    background: #fff;
}

效果是这样的：

这样，拖拽排序就完成了。

我们对 react-dnd 的掌握又加深了一分。

这个案例的全部代码如下：

import { useCallback, useEffect, useRef, useState } from "react";
import "./App2.css";
import { useDrag, useDrop } from "react-dnd";

interface CardItem {
    id: number;
    content: string;
}

interface CardProps {
    data: CardItem;
    index: number;
    swapIndex: Function;
}

interface DragData {
    id: number;
    index: number;
}

function Card(props: CardProps) {
    const { data, swapIndex, index } = props;

    const ref = useRef(null);

    const [{ dragging }, drag] = useDrag({
        type: "card",
        item: {
            id: data.id,
            index: index,
        },
        collect(monitor) {
            return {
                dragging: monitor.isDragging(),
            };
        },
    });
    const [, drop] = useDrop({
        accept: "card",
        hover(item: DragData) {
            swapIndex(index, item.index);
            item.index = index;
        },
        // drop(item: DragData) {
        //     swapIndex(index, item.index)
        // }
    });

    useEffect(() => {
        drag(ref);
        drop(ref);
    }, []);

    return (
        <div ref={ref} className={dragging ? "card dragging" : "card"}>
            {data.content}
        </div>
    );
}

function App() {
    const [cardList, setCardList] = useState<CardItem[]>([
        {
            id: 0,
            content: "000",
        },
        {
            id: 1,
            content: "111",
        },
        {
            id: 2,
            content: "222",
        },
        {
            id: 3,
            content: "333",
        },
        {
            id: 4,
            content: "444",
        },
    ]);

    const swapIndex = useCallback((index1: number, index2: number) => {
        const tmp = cardList[index1];
        cardList[index1] = cardList[index2];
        cardList[index2] = tmp;

        setCardList([...cardList]);
    }, []);

    return (
        <div className="card-list">
            {cardList.map((item: CardItem, index) => (
                <Card
                    data={item}
                    key={"card_" + item.id}
                    index={index}
                    swapIndex={swapIndex}
                />
            ))}
        </div>
    );
}

export default App;

css：

.card {
    width: 200px;
    line-height: 60px;
    padding: 0 20px;
    border: 1px solid #000;
    background: skyblue;
    margin: 10px;
    cursor: move;
}

.dragging {
    border-style: dashed;
    background: #fff;
}

案例代码上传了小册仓库

总结​

我们学了 react-dnd 并用它实现了拖拽排序。

react-dnd 主要就是 useDrag、useDrop、useDragLayout 这 3 个 API。

useDrag 是给元素添加拖拽，指定 item、type、collect 等参数。

useDrop 是给元素添加 drop，指定 accepet、drop、hover、collect 等参数。

useDragLayout 是自定义预览，可以通过 monitor 拿到拖拽的实时位置。

此外，最外层还要加上 DndProvider，用来组件之间传递数据。

其实各种拖拽功能的实现思路比较固定：什么元素可以拖拽，什么元素可以 drop，drop 或者 hover 的时候修改数据触发重新渲染就好了。

比如拖拽排序就是 hover 的时候互换两个 index 的对应的数据，然后 setState 触发渲染。

用 react-dnd，我们能实现各种基于拖拽的功能。