connectDragPreview() component is also displayed as regular component

[croraf]

Maybe this is possible duplicate of #399.
This is probably known behaviour, but would be good if following can be achieved:

render () {
        const { connectDragSource, connectDragPreview, isDragging } = this.props;

        return (
            <div className='top'>
                <div>Ordinary</div>
                {connectDragSource (<div>Dragabble</div>)}
                {connectDragPreview (<div>my preview</div>)}
            </div>
        );
}

I want my preview component to be shown only as an actual preview, not as an ordinary component.
But this shows <div>my preview</div> below the actual draggable component inside 'top' div. I don't want it to be shown there, but only as a preview. Can this be achieved?

[maierson]

Here it is (use custom drag layer):
https://github.com/react-dnd/react-dnd/blob/master/examples/02%20Drag%20Around/Custom%20Drag%20Layer/CustomDragLayer.js

and this is the relevant part of the code:

import { getEmptyImage } from 'react-dnd-html5-backend';

componentDidMount() {
    // Use empty image as a drag preview so browsers don't draw it
    // and we can draw whatever we want on the custom drag layer instead.
    if (this.props.connectDragPreview) {
      this.props.connectDragPreview(getEmptyImage(), {
        // IE fallback: specify that we'd rather screenshot the node
        // when it already knows it's being dragged so we can hide it with CSS.
        captureDraggingState: true,
      });
    }
  }

[wiadev]

Hi
I need to build a custom dragPreview component beside dragSource component but when I use the above code in componentDidMount(), it shows no preview while dragging.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.