react 拖拽组件使用

React中实现拖拽组件的方法有多种，其中比较常用的是使用react-dnd库。下面是一个简单的使用示例：

1. 安装react-dnd和react-dnd-html5-backend：

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

2. 创建可拖拽和可放置的组件：

import { useDrag, useDrop } from 'react-dnd';

function DraggableItem(props) {
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'item', id: props.id },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  });

  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      {props.children}
    </div>
  );
}

function DroppableArea(props) {
  const [{ isOver }, drop] = useDrop({
    accept: 'item',
    drop: (item, monitor) => {
      props.onDrop(item.id);
    },
    collect: monitor => ({
      isOver: monitor.isOver(),
    }),
  });

  return (
    <div ref={drop} style={{ backgroundColor: isOver ? 'lightgreen' : 'white' }}>
      {props.children}
    </div>
  );
}

3. 在父组件中使用可拖拽和可放置的组件：

function App() {
  const [items, setItems] = useState([1, 2, 3]);

  const handleDrop = (id) => {
    setItems(items.filter(item => item !== id));
  };

  return (
    <div>
      {items.map(item => (
        <DraggableItem key={item} id={item}>
          Item {item}
        </DraggableItem>
      ))}
      <DroppableArea onDrop={handleDrop}>
        Drop here
      </DroppableArea>
    </div>
  );
}

在上面的示例中，`DraggableItem`组件是可拖拽的，`DroppableArea`组件是可放置的。当`DraggableItem`被拖拽到`DroppableArea`上时，会调用`handleDrop`函数删除该项。