React-dnd: O componente connectDragPreview () também é exibido como um componente regular

Criado em 28 mai. 2017 · 3Comentários · Fonte: react-dnd/react-dnd

Talvez seja uma possível duplicata de https://github.com/react-dnd/react-dnd/issues/399.
Este é provavelmente um comportamento conhecido, mas seria bom se o seguinte pudesse ser alcançado:

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

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

Quero que meu componente de visualização seja mostrado apenas como uma visualização real, não como um componente comum.
Mas isso mostra <div>my preview</div> abaixo do componente real arrastável dentro do div 'superior'. Não quero que seja mostrado lá, mas apenas como uma prévia. Isso pode ser alcançado?

wontfix

Fonte

croraf

Todos 3 comentários

Aqui está (use a camada de arrastar personalizada):
https://github.com/react-dnd/react-dnd/blob/master/examples/02%20Drag%20Around/Custom%20Drag%20Layer/CustomDragLayer.js

e esta é a parte relevante do 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 em 5 jun. 2017

👍1

Oi
Preciso construir um componente dragPreview personalizado ao lado do componente dragSource, mas quando uso o código acima em componentDidMount (), ele não mostra nenhuma visualização ao arrastar.

wiadev em 23 abr. 2019

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.