React-dnd: El componente connectDragPreview () también se muestra como componente normal

Creado en 28 may. 2017 · 3Comentarios · Fuente: react-dnd/react-dnd

Quizás este sea un posible duplicado de https://github.com/react-dnd/react-dnd/issues/399.
Este es probablemente un comportamiento conocido, pero sería bueno si se puede lograr lo siguiente:

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

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

Quiero que mi componente de vista previa se muestre solo como una vista previa real, no como un componente ordinario.
Pero esto muestra <div>my preview</div> debajo del componente arrastrable real dentro del div 'top'. No quiero que se muestre allí, sino solo como una vista previa. ¿Se puede lograr esto?

wontfix

Fuente

croraf

Todos 3 comentarios

Aquí está (use una capa de arrastre personalizada):
https://github.com/react-dnd/react-dnd/blob/master/examples/02%20Drag%20Around/Custom%20Drag%20Layer/CustomDragLayer.js

y esta es la parte relevante del código:

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 en 5 jun. 2017

👍1

Hola
Necesito construir un componente dragPreview personalizado al lado del componente dragSource, pero cuando uso el código anterior en componentDidMount (), no muestra una vista previa al arrastrar.

wiadev en 23 abr. 2019

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.