react拖拽实现
实现拖拽的基本步骤
安装依赖库react-dnd和react-dnd-html5-backend：
npm install react-dnd react-dnd-html5-backend创建可拖拽组件需要使用useDrag钩子：
import { useDrag } from 'react-dnd';
function DraggableItem({ item }) {
const [{ isDragging }, drag] = useDrag(() => ({
type: 'ITEM',
item: { id: item.id },
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}));
return (
<div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
{item.content}
</div>
);
}创建放置区域
使用useDrop钩子实现放置区域：
import { useDrop } from 'react-dnd';
function DropZone({ onDrop }) {
const [{ isOver }, drop] = useDrop(() => ({
accept: 'ITEM',
drop: (item) => onDrop(item.id),
collect: (monitor) => ({
isOver: !!monitor.isOver(),
}),
}));
return (
<div ref={drop} style={{ backgroundColor: isOver ? 'lightgreen' : 'white' }}>
放置区域
</div>
);
}组合组件并管理状态
在父组件中管理拖拽状态：
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
function App() {
const [items, setItems] = useState([...]);
const [droppedItems, setDroppedItems] = useState([]);
const handleDrop = (id) => {
const item = items.find(i => i.id === id);
setDroppedItems([...droppedItems, item]);
};
return (
<DndProvider backend={HTML5Backend}>
<div>
{items.map(item => (
<DraggableItem key={item.id} item={item} />
))}
<DropZone onDrop={handleDrop} />
</div>
</DndProvider>
);
}高级自定义选项
实现自定义拖拽预览：
const [{ isDragging }, drag, preview] = useDrag(() => ({
type: 'ITEM',
item: { id },
}));
return (
<>
<div ref={preview} style={{ position: 'absolute', opacity: 0 }}>
预览内容
</div>
<div ref={drag}>实际内容</div>
</>
);添加拖拽限制条件：
useDrop(() => ({
accept: 'ITEM',
canDrop: (item) => item.type === 'ALLOWED_TYPE',
drop: (item) => {...},
}));触摸设备支持
对于移动设备，需要安装react-dnd-touch-backend：
npm install react-dnd-touch-backend然后替换backend：
import { TouchBackend } from 'react-dnd-touch-backend';
<DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>
...
</DndProvider>性能优化建议
对于大量可拖拽项，使用useMemo优化：
const items = useMemo(() => data.map(item => (
<DraggableItem key={item.id} item={item} />
)), [data]);避免不必要的重渲染，将拖拽逻辑与展示组件分离。
