react如何实现拖拽
实现拖拽的基本方法
在React中实现拖拽功能可以通过原生HTML5的拖拽API或第三方库如react-dnd、react-beautiful-dnd等完成。以下是两种常见实现方式：
使用HTML5拖拽API
- 为可拖拽元素添加
draggable属性。 - 监听
onDragStart事件设置拖拽数据。 - 在目标元素监听
onDragOver阻止默认行为以允许放置。 - 通过
onDrop事件获取拖拽数据并更新状态。
function DraggableItem() {
const handleDragStart = (e) => {
e.dataTransfer.setData("text/plain", e.target.id);
};
return (
<div
id="item1"
draggable
onDragStart={handleDragStart}
>
Drag me
</div>
);
}使用react-dnd库
react-dnd是专为React设计的拖拽库，提供更声明式的API：
-
安装库：
npm install react-dnd react-dnd-html5-backend -
定义拖拽源和目标：
import { useDrag, useDrop } from 'react-dnd';
function DraggableBox({ id, text }) { const [{ isDragging }, drag] = useDrag(() => ({ type: 'BOX', item: { id }, collect: (monitor) => ({ isDragging: monitor.isDragging(), }), }));
return ( <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}> {text}
function DropArea() { const [{ canDrop }, drop] = useDrop(() => ({ accept: 'BOX', drop: (item) => console.log('Dropped:', item), collect: (monitor) => ({ canDrop: monitor.canDrop(), }), }));
return
Drop here
;
}
### 性能优化建议
对于复杂列表的拖拽，`react-beautiful-dnd`更适合：
1. 自动处理虚拟列表优化
2. 提供平滑的动画效果
3. 内置键盘无障碍支持
安装方式：
```bash
npm install react-beautiful-dnd示例：
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
function List({ items, onDragEnd }) {
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="list">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{items.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>
);
}无障碍注意事项
- 为拖拽元素添加
aria-grabbed属性 - 确保键盘操作可以触发拖拽
- 使用
role="button"标明可交互元素 - 提供视觉反馈表明拖拽状态
<div
draggable
aria-grabbed={isDragging}
role="button"
tabIndex={0}
>
Accessible Drag Item
</div>
