I've been reviewing the documentation and github issues and connectDragPreview
still remains a mystery to me. I would like to define a custom preview for how the item appears when it is being dragged. It should function just as the example here works with the horse image appearing on drag. Here is my code:
export const tokenCollector: DragSourceCollector = (connect, monitor) => {
return {
connectDragSource: connect.dragSource(),
connectDragPreview: connect.dragPreview(),
isDragging: monitor.isDragging()
};
};
class TokenClass extends React.Component<TokenProps> {
componentDidMount() {
const { connectDragPreview } = this.props;
const img = new Image();
img.src = '<encoded image>';
img.onload = () => connectDragPreview(<div>{img}</div>);
}
render() {
const { connectDragSource, isDragging, children } = this.props;
return connectDragSource(
<div style={{ opacity: isDragging ? 0.5 : 1 }}>
{children}
</div>
);
}
}
const dragSource = DragSource(DropType.Token, tokenSpec, tokenCollector)(TokenClass);
export { dragSource as Token };
The standard preview appears with this code.
I then tried to wrap my connectDragSource
in my component's render()
method with connectDragPreview
, but that only appears to change the drag source where it was picked up from, not how it appears as it's being dragged.
How can I specify the markup that should be used as the dragging visual?