React-dnd: connectDragPreview()-Komponente wird auch als reguläre Komponente angezeigt

Erstellt am 28. Mai 2017  ·  3Kommentare  ·  Quelle: react-dnd/react-dnd

Vielleicht ist dies ein mögliches Duplikat von https://github.com/react-dnd/react-dnd/issues/399.
Dies ist wahrscheinlich ein bekanntes Verhalten, wäre aber gut, wenn Folgendes erreicht werden könnte:

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

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

Ich möchte, dass meine Vorschaukomponente nur als tatsächliche Vorschau angezeigt wird, nicht als normale Komponente.
Aber dies zeigt <div>my preview</div> unterhalb der eigentlichen ziehbaren Komponente innerhalb des 'oberen' Div. Ich möchte nicht, dass es dort gezeigt wird, sondern nur als Vorschau. Kann dies erreicht werden?

wontfix

Alle 3 Kommentare

Hier ist es (benutzerdefinierte Drag-Ebene verwenden):
https://github.com/react-dnd/react-dnd/blob/master/examples/02%20Drag%20Around/Custom%20Drag%20Layer/CustomDragLayer.js

und das ist der relevante Teil des Codes:

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

Hi
Ich muss neben der dragSource-Komponente eine benutzerdefinierte dragPreview-Komponente erstellen, aber wenn ich den obigen Code in componentDidMount() verwende, wird beim Ziehen keine Vorschau angezeigt.

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität hatte. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen