React-DnD拖动排序的使用体验分享

2023-09-14 10:37:42

React-DnD 是一个流行的 React 库，用于轻松地将拖放功能添加到您的应用程序中。它提供了许多有用的组件和钩子，使您可以轻松创建可拖放的列表、网格和其他界面元素。

安装

要开始使用 React-DnD，您需要先安装它：

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

创建组件

接下来，您需要创建一个组件来充当拖动源和接受拖放的组件。此组件可以是任何类型的 React 组件，但它通常是一个简单的 div 或 ul 元素。

import React from "react";
import { Draggable, Droppable } from "react-dnd";

const DraggableItem = ({ item, index, moveItem }) => {
  return (
    <Draggable index={index} item={item}>
      {({ connectDragSource, isDragging }) => (
        <div ref={connectDragSource} style={{ opacity: isDragging ? 0.5 : 1 }}>
          {item}
        </div>
      )}
    </Draggable>
  );
};

const DroppableList = ({ items, moveItem }) => {
  return (
    <Droppable onDrop={moveItem}>
      {({ connectDropTarget }) => (
        <ul ref={connectDropTarget}>
          {items.map((item, index) => (
            <DraggableItem key={item.id} item={item} index={index} moveItem={moveItem} />
          ))}
        </ul>
      )}
    </Droppable>
  );
};

编写逻辑

最后，您需要编写一些逻辑来处理拖放操作。此逻辑通常位于您的应用程序的 Redux 存储或 React 状态中。

const moveItem = (dragIndex, hoverIndex) => {
  const items = [...this.state.items];
  const draggedItem = items[dragIndex];

  items.splice(dragIndex, 1);
  items.splice(hoverIndex, 0, draggedItem);

  this.setState({ items });
};

使用

现在您已经创建了所有必要的组件和逻辑，您就可以在您的应用程序中使用 React-DnD 了。只需将 DraggableItem 和 DroppableList 组件导入到您的组件中，并将其传递给它们所需的数据即可。

import { DraggableItem, DroppableList } from "./components";

const MyComponent = () => {
  const [items, setItems] = useState([
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" },
  ]);

  const moveItem = (dragIndex, hoverIndex) => {
    const newItems = [...items];
    const draggedItem = newItems[dragIndex];

    newItems.splice(dragIndex, 1);
    newItems.splice(hoverIndex, 0, draggedItem);

    setItems(newItems);
  };

  return (
    <div>
      <DroppableList items={items} moveItem={moveItem} />
    </div>
  );
};