react拖拽排序组件怎么使用

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

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

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

1. 创建一个可拖拽的组件。你可以使用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)
);

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

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;
    

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

import SortableList from "./SortableList";
    

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

}
    ;
    

export default App;
    

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！