react原生多个可拖动和可调整大小的平面列表

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

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

// 拖拽源组件
const DraggableItem = ({ item, index, moveItem }) => {
  const ref = useRef(null);
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'item', index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
    end: (item, monitor) => {
      const dropResult = monitor.getDropResult();
      if (item && dropResult) {
        moveItem(item.index, dropResult.index);
      }
    },
  });

  drag(ref);

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

// 拖拽目标组件
const DropTargetArea = ({ onDrop, children }) => {
  const [{ isOver }, drop] = useDrop({
    accept: 'item',
    drop: (item, monitor) => {
      onDrop(item, monitor);
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  });

  return (
    <div ref={drop} style={{ backgroundColor: isOver ? 'lightblue' : 'transparent' }}>
      {children}
    </div>
  );
};

import { ResizableBox } from 'react-resizable';

const ResizableItem = ({ width, height, children }) => {
  const handleResize = (event, { size }) => {
    // 处理调整大小的逻辑
  };

  return (
    <ResizableBox width={width} height={height} onResize={handleResize}>
      {children}
    </ResizableBox>
  );
};

const App = () => {
  const [items, setItems] = useState([
    { id: 1, content: 'Item 1' },
    { id: 2, content: 'Item 2' },
    { id: 3, content: 'Item 3' },
  ]);

  const moveItem = (dragIndex, hoverIndex) => {
    const dragItem = items[dragIndex];
    const updatedItems = [...items];
    updatedItems.splice(dragIndex, 1);
    updatedItems.splice(hoverIndex, 0, dragItem);
    setItems(updatedItems);
  };

  const handleDrop = (item, monitor) => {
    // 处理拖放的逻辑
  };

  return (
    <DropTargetArea onDrop={handleDrop}>
      {items.map((item, index) => (
        <DraggableItem key={item.id} item={item} index={index} moveItem={moveItem} />
      ))}
    </DropTargetArea>
  );
};