React-dnd: Grünes Pluszeichen in Chrome

+1

Dieses Problem kann auf Chrome 49 unter Mac oder Chrome 49 unter Windows auf dieser Seite nicht reproduziert werden: http://gaearon.github.io/react-dnd/examples-drag-around-naive.html

Passiert das noch für dich? Welche Chrome-Version verwenden Sie und welches Betriebssystem?

Können Sie das Cursorverhalten auch wie hier beschrieben steuern: http://gaearon.github.io/react-dnd/examples-customize-drop-effects.html?

Ich sehe das Problem in allen Beispielen auf Chrome 49 auf Mac (immer noch 10.10). Beim Drag-Start ändert sich der Cursor in ein grünes Pluszeichen (normalerweise angezeigt durch cursor: copy ). und wird dann zum "Verschieben" -Cursor.

Ich kann dies in dem von Ihnen verknüpften Beispiel @globexdesigns (Chrome 49, OSX 10.11) sporadisch reproduzieren - es wird nur für den

Ich vermute, dass es entweder eine kurze Verzögerung zwischen dem gestapelten Renderzyklus von React und der dnd-Implementierung des Browsers ist (in diesem Fall können wir ihn möglicherweise beheben) oder ein Fehler in Chrome. Ich werde mit anderen Browsern herumspielen (es sei denn, jemand schlägt mich) und sehen, ob ich dort einen Repro bekommen kann.

Ich sehe dasselbe unter Chrome 49 OSX 10.11.4 - erscheint für den Bruchteil einer Sekunde und kehrt dann zum Normalzustand zurück. Das Verhalten tritt bei mir in Safari oder Firefox nicht auf.

@EvNaverniouk Ich bin auf Chrome 49 und OS X 10.11.4 und ja, ich sehe immer noch das Problem, und ja, ich sehe das Kopiersymbol, wenn erwartet, in diesem Link, auf den Sie verwiesen haben http://gaearon.github.io/react -dnd / examples-customize-drop-effects.html

Dieses Problem wird auch in Chrome 50 unter OS X 10.11.2 angezeigt.

Ich sehe auch dieses Chrome 51 unter OS X 10.10.1

Ich sehe dies auch in Chrome Version 51 unter OSX 10.11.4.

Bearbeiten: Nachdem einige weitere Funktionen hinzugefügt wurden, die eine Drag-Ebene implementieren und den Code mithilfe von connectDragPreview und getEmptyImage () ordnungsgemäß einschließen, scheint das Problem vorerst behoben zu sein.

Ich habe dies zufällig in React DnD sowie in anderen Bibliotheken gesehen und sogar nur rohes HTML5 ziehbar. Ich vermute, dass es damit zu tun hat, dass wir im Dragstart nicht effectAllowed setzen.

Irgendwelche Updates dazu? Das gleiche Problem tritt in Chrome 53 OSX 10.10.5 auf

Sehen Sie das Gleiche Chrome 54.0.2840.71 10.11.6, irgendwelche Updates?

+1

Die Verwendung von {dropEffect: 'copy'} maskiert das Problem (indem das grüne Plus immer sichtbar gemacht wird). aber repariert es nicht richtig.

Außerdem scheint {dropEffect: 'move'} den Cursor nicht erfolgreich zu einem 4-spitzen Fadenkreuz zu machen.

Chrome-Version: 55.0.2883.95 (Official Build) (64-Bit)

Das Schließen dieses Problems, da es anscheinend keine Funktion dieser Bibliothek ist.

@fredguest hast du jemals eine Lösung dafür gefunden?

@ Yamikamisama leider nein.

Die grüne Plus-Schaltfläche wird für mich erst angezeigt, wenn meine canDrop-Funktion false zurückgibt. Dann wird sie angezeigt.

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

Das hat bei mir auf Chrom funktioniert. Fügen Sie es einfach in die Ereignisse "dragstart" und "dragend" ein, da dies die einzigen sind, die Zugriff auf das dataTransfer-Objekt haben.

Das hat mir nicht geholfen

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

Es passiert nur für einen Moment zwischen cursor: 'grab' und cursor: 'grabbing'
Es wird leider nicht im GIF-Format angezeigt, aber das Bild unter dem GIF zeigt das Problem

Ich habe auch dieses Problem. Es sieht aus wie ein Fehler in Chrome.

+1

+1 Chrome Version 84.0.4147.89

Bearbeiten: Dies geschieht nur, wenn der folgende Code verwendet wird, um kein Vorschaubild zu haben:

useEffect(() => {
    preview(getEmptyImage(), { captureDraggingState: true });
  }, [preview]);

Das Implementieren einer Vorschau löst dieses Problem