React-dnd: connectDragPreview() component is also displayed as regular component

Created on 28 May 2017 · 3Comments · Source: react-dnd/react-dnd

Maybe this is possible duplicate of https://github.com/react-dnd/react-dnd/issues/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?

wontfix

Source

croraf

All 3 comments

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,
      });
    }
  }

maierson on 5 Jun 2017

👍1

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.

wiadev on 23 Apr 2019

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.