当前位置：首页 > React

react如何实现拖拽布局

2026-03-11 04:47:57React

实现拖拽布局的核心方法

React 中实现拖拽布局通常需要借助第三方库，以下是几种主流方案及其实现方式：

使用 `react-dnd` 库

react-dnd 是 React 生态中功能强大的拖拽库，适合复杂场景。

安装依赖：

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

基础代码结构：

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

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

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

const DropZone = ({ children }) => {
  const [{ canDrop }, drop] = useDrop(() => ({
    accept: 'ITEM',
    drop: () => ({ name: 'DropZone' }),
    collect: (monitor) => ({
      canDrop: !!monitor.canDrop(),
    }),
  }));

  return (
    <div ref={drop} style={{ background: canDrop ? 'lightgreen' : 'white' }}>
      {children}
    </div>
  );
};

const App = () => (
  <DndProvider backend={HTML5Backend}>
    <DropZone>
      <DraggableItem id="1" text="Drag me" />
    </DropZone>
  </DndProvider>
);

使用 `react-beautiful-dnd` 库

专为列表拖拽优化的库，适合排序场景。

安装依赖：

npm install react-beautiful-dnd

示例代码：

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const items = [
  { id: '1', content: 'Item 1' },
  { id: '2', content: 'Item 2' },
];

const App = () => {
  const [list, setList] = useState(items);

  const onDragEnd = (result) => {
    if (!result.destination) return;
    const newList = Array.from(list);
    const [removed] = newList.splice(result.source.index, 1);
    newList.splice(result.destination.index, 0, removed);
    setList(newList);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {list.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

使用原生 HTML5 API

适合简单场景，无需额外依赖。

实现示例：

react如何实现拖拽布局

const DraggableComponent = () => {
  const handleDragStart = (e) => {
    e.dataTransfer.setData('text/plain', e.target.id);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text');
    const draggable = document.getElementById(id);
    e.target.appendChild(draggable);
  };

  const handleDragOver = (e) => {
    e.preventDefault();
  };

  return (
    <div>
      <div
        id="drag-item"
        draggable
        onDragStart={handleDragStart}
        style={{ width: '100px', height: '100px', background: 'red' }}
      />
      <div
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        style={{ width: '200px', height: '200px', border: '1px dashed black' }}
      />
    </div>
  );
};