React DnDReact DnD
  • 开始
  • 指南
⌘ K
主题
概述
教程
测试
FAQ
故障排除
组件
DndProvider
DragPreviewImage
Hooks
概述
useDrag
useDrop
useDragLayer
useDragDropManager
监控状态
DragSourceMonitor
DropTargetMonitor
DragLayerMonitor
后端
HTML5
后台
触摸
测试
最后更新时间:
帮助改进此文档
Made with ❤️ by Eric
‌
‌
‌
‌

DragPreviewImage

用于将 HTML 图像元素渲染为断开的拖动预览的组件。

用法

import { DragPreviewImage, DragSource } from 'react-dnd';
function DraggableHouse({ connectDragSource, connectDragPreview }) {
return (
<>
<DragPreviewImage src="house_dragged.png" connect={connectDragPreview} />
<div ref={connectDragSource}>🏠</div>
</>
);
}
export default DragSource(
/* ... */
(connect, monitor) => ({
connectDragSource: connect.dragSource(),
connectDragPreview: connect.dragPreview(),
}),
);

属性

  • connect: 需要。拖动预览连接器功能。