当前位置：首页 > React

react实现简单拖拽功能

2026-01-27 17:36:38React

实现拖拽功能的核心步骤

使用React实现拖拽功能主要依赖HTML5的Drag and Drop API，结合React的状态管理。以下是核心实现方法：

设置可拖拽元素

为需要拖拽的元素添加draggable属性，并绑定相关事件：

<div
  draggable
  onDragStart={(e) => handleDragStart(e, itemId)}
  onDragEnd={handleDragEnd}
>
  可拖拽内容
</div>

处理拖拽开始事件

在onDragStart事件中存储被拖拽元素的数据：

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

设置放置目标区域

为接收拖拽元素的区域绑定放置相关事件：

<div
  onDragOver={(e) => e.preventDefault()}
  onDrop={(e) => handleDrop(e)}
>
  放置区域
</div>

处理放置事件

在onDrop事件中获取被拖拽元素的数据并进行状态更新：

const handleDrop = (e) => {
  e.preventDefault();
  const draggedId = e.dataTransfer.getData('text/plain');
  // 更新状态或执行其他操作
};

完整组件示例

import { useState } from 'react';

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

  const handleDragStart = (e, index) => {
    setDraggedItem(items[index]);
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', index);
  };

  const handleDragOver = (index) => {
    const draggedOverItem = items[index];
    if (draggedItem === draggedOverItem) return;

    const newItems = items.filter(item => item !== draggedItem);
    newItems.splice(index, 0, draggedItem);
    setItems(newItems);
  };

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

使用第三方库的简化方案

对于更复杂的拖拽需求，可以考虑使用现成的React拖拽库：

react-dnd：适合复杂的拖拽交互

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

react-beautiful-dnd：专为列表排序设计
```
npm install react-beautiful-dnd
```
react-draggable：实现元素自由拖拽
```
npm install react-draggable
```

样式优化建议

为提升用户体验，可以添加拖拽时的视觉反馈：

.dragging {
  opacity: 0.5;
  border: 2px dashed #000;
}

.dropzone {
  min-height: 100px;
  border: 2px dashed #ccc;
  transition: background-color 0.2s;
}

.dropzone.active {
  background-color: #f0f0f0;
}