如何用React實現一個拖放的交互功能

要在React中實現拖放的交互功能，可以使用React DnD（React Drag and Drop）庫。以下是一個簡單的示例代碼，演示如何在React中實現拖放功能。

首先，安裝React DnD庫：

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

然后，創建一個Draggable組件和一個Droppable組件：

// Draggable.js
import { useDrag } from 'react-dnd';

const Draggable = ({ id, children }) => {
  const [{ isDragging }, drag] = useDrag({
    item: { id, type: 'box' },
    collect: monitor => ({
      isDragging: !!monitor.isDragging(),
    }),
  });

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

export default Draggable;

// Droppable.js
import { useDrop } from 'react-dnd';

const Droppable = ({ onDrop, children }) => {
  const [, drop] = useDrop({
    accept: 'box',
    drop: onDrop,
  });

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

export default Droppable;

最后，在父組件中使用Draggable和Droppable組件來實現拖放功能：

import Draggable from './Draggable';
import Droppable from './Droppable';

const App = () => {
  const handleDrop = (item) => {
    console.log(item);
  };

  return (
    <div>
      <Droppable onDrop={handleDrop}>
        <Draggable id="1">Drag me!</Draggable>
      </Droppable>
    </div>
  );
};

export default App;

在上述示例中，使用useDrag和useDrop自定義鉤子來實現拖拽和放置功能。Draggable組件表示可拖拽的元素，Droppable組件表示可放置的區域。通過在Droppable組件中傳遞一個onDrop回調函數，可以在放置操作發生時獲取拖拽的數據。