组件之间的DnD

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

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

function App() {
  return (
    <DndProvider backend={HTML5Backend}>
      {/* 你的应用组件 */}
    </DndProvider>
  );
}

import React from 'react';
import { useDrag } from 'react-dnd';

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

  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1, cursor: 'move', padding: '10px', marginBottom: '5px' }}>
      {text}
    </div>
  );
}

import React from 'react';
import { useDrop } from 'react-dnd';

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

  return (
    <div ref={drop} style={{ height: '200px', padding: '20px' }}>
      {isOver ? '放下卡片！' : '拖动卡片到这里'}
    </div>
  );
}

function App() {
  const handleDrop = (id) => {
    console.log(`卡片 ${id} 被放置了`);
  };

  return (
    <DndProvider backend={HTML5Backend}>
      <DraggableCard id="1" text="卡片 1" />
      <DraggableCard id="2" text="卡片 2" />
      <DroppableZone onDrop={handleDrop} />
    </DndProvider>
  );
}

npm start