React-dnd: Le composant connectDragPreview() est également affiché en tant que composant normal

Créé le 28 mai 2017 · 3Commentaires · Source: react-dnd/react-dnd

C'est peut-être un doublon possible de https://github.com/react-dnd/react-dnd/issues/399.
C'est probablement un comportement connu, mais ce serait bien si ce qui suit peut être atteint :

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

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

Je veux que mon composant d'aperçu soit affiché uniquement comme un aperçu réel, pas comme un composant ordinaire.
Mais cela montre <div>my preview</div> dessous du composant déplaçable réel à l'intérieur de 'top' div. Je ne veux pas qu'il y soit montré, mais seulement en avant-première. Cela peut-il être atteint ?

wontfix

Source

croraf

Tous les 3 commentaires

Le voici (utilisez le calque de glissement personnalisé) :
https://github.com/react-dnd/react-dnd/blob/master/examples/02%20Drag%20Around/Custom%20Drag%20Layer/CustomDragLayer.js

et voici la partie pertinente du 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 le 5 juin 2017

👍1

salut
J'ai besoin de créer un composant dragPreview personnalisé à côté du composant dragSource, mais lorsque j'utilise le code ci-dessus dans componentDidMount(), il n'affiche aucun aperçu lors du glissement.

wiadev le 23 avr. 2019

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.