React 中使用 React-DnD 实现拖拽排序的功能-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，拖拽排序（Drag and Drop）的交互方式已经非常普遍。React 作为一种流行的前端框架，也提供了一些库和组件来实现拖拽交互，其中 React-DnD 是比较流行的一个库，本文将介绍如何使用 React-DnD 实现拖拽排序的功能。

React-DnD 简介

React-DnD 是一个基于 HTML5 Drag and Drop API 的 React 拖拽库，它提供了一套高级的拖拽 API，可以轻松地实现各种复杂的拖拽交互。React-DnD 支持 React 16 及更高版本。

React-DnD 的主要概念包括：

Drag Source（拖拽源）：表示要被拖拽的组件，它负责发起拖拽操作，并在拖拽过程中提供拖拽的数据。
Drop Target（拖拽目标）：表示可以接受拖拽操作的组件，它负责处理拖拽事件，并提供拖拽完成后的数据。
Drag and Drop Context（拖拽上下文）：表示拖拽的全局状态，包括当前拖拽的源和目标，和拖拽过程中的其他状态信息。

使用 React-DnD 时，通常需要创建一个或多个拖拽源和拖拽目标，并在它们之间建立拖拽关系，接下来我们将分步骤介绍如何使用 React-DnD 实现拖拽排序。

实现步骤

步骤一：安装 React-DnD

在使用 React-DnD 前，我们需要先安装它：

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

react-dnd 是 React-DnD 核心库，react-dnd-html5-backend 是用于 HTML5 Drag and Drop API 的后端库。

步骤二：创建拖拽源组件

我们先创建一个名为 Draggable 的组件作为拖拽源。这个组件将显示可拖拽的元素，并将元素的拖拽数据传递给拖拽目标。

// javascriptcn.com 代码示例
import { useDrag } from 'react-dnd';

function Draggable(props) {
  const [collectedProps, drag] = useDrag({
    item: { type: 'BOX', id: props.id },

    end: (item, monitor) => {
      const dropResult = monitor.getDropResult();

      if (item && dropResult) {
        // 处理拖拽完成后的逻辑
      }
    }
  });

  return (
    <div ref={drag}>
      {props.children}
    </div>
  );
}

useDrag 是一个 React Hook，它可以创建一个拖拽源。我们把它应用到 Draggable 组件中，返回值是一个数组 [collectedProps, drag]。这个数组的第二个元素 drag 是一个回调函数，它用于绑定拖拽源到 DOM 元素上，让用户可以拖拽它。

useDrag 函数的参数是一个配置对象，其中 item 属性表示拖拽元素的数据，我们定义了一个 type 属性和一个 id 属性表示拖拽元素的类型和 ID。end 属性是一个回调函数，它在拖拽完成后被调用，可以在这里处理拖拽完成后的逻辑。

步骤三：创建拖拽目标组件

接下来我们创建一个名为 Droppable 的组件作为拖拽目标。这个组件将接受拖拽源的拖拽数据，并排序显示这些数据。

// javascriptcn.com 代码示例
import { useDrop } from 'react-dnd';

function Droppable(props) {
  const [collectedProps, drop] = useDrop({
    accept: 'BOX',

    collect: (monitor) => {
      return { 
        isOver: monitor.isOver({ shallow: true }),
      };
    },

    hover: (item, monitor) => {
      const dragIndex = item.id;
      const hoverIndex = props.index;

      if (dragIndex === hoverIndex) {
        return;
      }

      props.moveBox(dragIndex, hoverIndex);
      item.id = hoverIndex;
    },

    drop: (item, monitor) => {
      // 处理拖拽完成后的逻辑
    }
  });

  return (
    <div ref={drop}>
      {props.children}
    </div>
  );
}

useDrop 是一个 React Hook，它可以创建一个拖拽目标。我们把它应用到 Droppable 组件中，返回值是一个数组 [collectedProps, drop]。这个数组的第二个元素 drop 是一个回调函数，它用于绑定拖拽目标到 DOM 元素上，让用户可以拖拽拖拽源到它上面。

useDrop 函数的参数是一个配置对象，其中 accept 属性表示接受哪种类型的拖拽元素，我们定义了一个 BOX 类型。collect 属性是一个回调函数，它返回一个对象，表示当前的拖拽状态。hover 和 drop 属性是回调函数，用于处理拖拽中的逻辑和拖拽完成的逻辑。

步骤四：创建列表组件

最后我们创建一个名为 BoxList 的组件作为整个拖拽排序的容器。这个组件将组合 Draggable 和 Droppable，实现拖拽排序的功能。

// javascriptcn.com 代码示例
function BoxList(props) {
  const [boxes, setBoxes] = useState(props.initialBoxes);

  const handleBoxMove = useCallback((dragIndex, hoverIndex) => {
    const dragBox = boxes[dragIndex];
    setBoxes(update(boxes, {
      $splice: [
        [dragIndex, 1],
        [hoverIndex, 0, dragBox],
      ],
    }));
  }, [boxes]);

  return (
    <div>
      {boxes.map((box, index) => (
        <Droppable index={index} moveBox={handleBoxMove}>
          <Draggable id={index}>
            <Box>{box.text}</Box>
          </Draggable>
        </Droppable>
      ))}
    </div>
  );
}

首先我们使用 useState Hook 创建了一个状态 boxes，它表示当前显示的数据项。handleBoxMove 是处理拖拽排序的逻辑，它接受两个参数，dragIndex 表示拖拽源的位置，hoverIndex 表示拖拽目标的位置。我们使用了 update 库来方便地更新 boxes 数组。

接下来我们遍历 boxes 数组，为每个数据项都创建一个 Droppable 和一个 Draggable，这样第一个数据项就成为了拖拽源，其他数据项就成为了拖拽目标。我们把 moveBox 属性传递给 Droppable 组件，这样在拖拽过程中就可以交换 boxes 数组的元素位置。注意这里我们还需要给 Droppable 传递一个 index 属性表示当前元素的位置。

最后我们把 BoxList 渲染到页面上，就可以看到一个可以拖拽排序的列表。

总结

通过本文的介绍，我们了解了如何使用 React-DnD 实现拖拽排序的功能。在实现过程中，我们创建了拖拽源组件和拖拽目标组件，并在它们之间建立了拖拽关系。我们还实现了列表组件来组合拖拽源和拖拽目标，以实现拖拽排序。希望这篇文章对你有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651e62bb95b1f8cacd60a007