当前位置：首页 > React

react实现拖拽元素

2026-01-27 06:00:51React

实现拖拽元素的基本步骤

使用React实现拖拽功能可以通过HTML5的拖拽API或第三方库如react-dnd、react-beautiful-dnd完成。以下是两种常见方法：

使用HTML5拖拽API

HTML5原生支持拖拽操作，通过draggable属性、onDragStart、onDragOver和onDrop等事件实现。

import React, { useState } from 'react';

function DraggableItem() {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
  const [draggedItem, setDraggedItem] = useState(null);

  const handleDragStart = (index) => {
    setDraggedItem(index);
  };

  const handleDragOver = (e) => {
    e.preventDefault(); // 必须阻止默认行为以触发onDrop
  };

  const handleDrop = (targetIndex) => {
    if (draggedItem === null) return;
    const newItems = [...items];
    const [movedItem] = newItems.splice(draggedItem, 1);
    newItems.splice(targetIndex, 0, movedItem);
    setItems(newItems);
    setDraggedItem(null);
  };

  return (
    <div>
      {items.map((item, index) => (
        <div
          key={index}
          draggable
          onDragStart={() => handleDragStart(index)}
          onDragOver={handleDragOver}
          onDrop={() => handleDrop(index)}
          style={{
            padding: '10px',
            margin: '5px',
            backgroundColor: '#f0f0f0',
            cursor: 'move',
          }}
        >
          {item}
        </div>
      ))}
    </div>
  );
}

export default DraggableItem;

使用react-dnd库

react-dnd是一个功能更强大的拖拽库，适合复杂场景（如跨容器拖拽、类型限制等）。

安装依赖：

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

实现代码：


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

const ItemType = 'ITEM';

const DraggableItem = ({ text, index, moveItem }) => { const [{ isDragging }, drag] = useDrag({ type: ItemType, item: { index }, collect: (monitor) => ({ isDragging: monitor.isDragging(), }), });

const [, drop] = useDrop({ accept: ItemType, hover: (draggedItem) => { if (draggedItem.index !== index) { moveItem(draggedItem.index, index); draggedItem.index = index; // 避免重复触发 } }, });

return ( <div ref={(node) => drag(drop(node))} style={{ opacity: isDragging ? 0.5 : 1, padding: '10px', margin: '5px', backgroundColor: '#f0f0f0', cursor: 'move', }}

{text}

); };

const DragList = () => { const [items, setItems] = React.useState(['Item 1', 'Item 2', 'Item 3']);

const moveItem = (fromIndex, toIndex) => { const newItems = [...items]; const [movedItem] = newItems.splice(fromIndex, 1); newItems.splice(toIndex, 0, movedItem); setItems(newItems); };

return (

{items.map((item, index) => ( ))}

); };

export default DragList;



---

### 关键注意事项

- HTML5 API限制：原生API对跨容器拖拽支持较弱，且移动端兼容性较差。
- 性能优化：复杂场景下，`react-dnd`或`react-beautiful-dnd`（专为列表优化）更高效。
- 无障碍支持：添加`aria-grabbed`等属性提升可访问性。

两种方法均可实现拖拽，根据项目复杂度选择合适方案。

react实现拖拽元素