IdbI

第51章—基于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，我们能实现各种基于拖拽的功能。

返回上级