react拖拽排序组件怎么使用

React

小亿

2024-02-01 11:50:59

栏目: 编程语言

要使用React拖拽排序组件，首先需要安装相关的库。最常用的库是react-dnd和react-dnd-html5-backend。

首先，在你的项目中安装这两个库：

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

创建一个可拖拽的组件。你可以使用react-dnd提供的DragSource和DropTarget高阶组件来实现拖拽功能。

import { DragSource, DropTarget } from "react-dnd";

const ItemTypes = {
  CARD: "card"
};

// 创建一个DragSource
const cardSource = {
  beginDrag(props) {
    return {
      id: props.id,
      index: props.index
    };
  }
};

const collectDragSource = (connect, monitor) => {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
};

// 创建一个DropTarget
const cardTarget = {
  drop(props, monitor) {
    const dragIndex = monitor.getItem().index;
    const hoverIndex = props.index;

    // 在这里可以调用一个回调函数来更新排序
    props.onMove(dragIndex, hoverIndex);
  }
};

const collectDropTarget = (connect, monitor) => {
  return {
    connectDropTarget: connect.dropTarget()
  };
};

// 最终的可拖拽组件
const DraggableCard = ({ text, isDragging, connectDragSource, connectDropTarget }) => {
  return connectDragSource(
    connectDropTarget(
      <div style={{ opacity: isDragging ? 0.5 : 1 }}>
        {text}
      </div>
    )
  );
};

export default DragSource(ItemTypes.CARD, cardSource, collectDragSource)(
  DropTarget(ItemTypes.CARD, cardTarget, collectDropTarget)(DraggableCard)
);

创建一个容器组件，用来渲染拖拽排序的列表。

import { useState } from "react";
import update from "immutability-helper";
import DraggableCard from "./DraggableCard";

const SortableList = () => {
  const [cards, setCards] = useState([
    { id: 1, text: "Card 1" },
    { id: 2, text: "Card 2" },
    { id: 3, text: "Card 3" }
  ]);

  const handleMoveCard = (dragIndex, hoverIndex) => {
    const dragCard = cards[dragIndex];

    setCards(
      update(cards, {
        $splice: [
          [dragIndex, 1],
          [hoverIndex, 0, dragCard]
        ]
      })
    );
  };

  return (
    <div>
      {cards.map((card, index) => (
        <DraggableCard
          key={card.id}
          id={card.id}
          index={index}
          text={card.text}
          onMove={handleMoveCard}
        />
      ))}
    </div>
  );
};

export default SortableList;

最后，在你的应用中使用SortableList组件。

import SortableList from "./SortableList";

const App = () => {
  return (
    <div>
      <h1>Sortable List</h1>
      <SortableList />
    </div>
  );
};

export default App;

现在，你就可以在应用中使用拖拽排序组件了。当你拖拽一个卡片并放置到另一个位置时，列表将会重新排序。

react拖拽排序组件怎么使用

最新问答

相关标签