React-dnd: Signe plus vert dans Chrome

+1

Impossible de reproduire ce problème sur Chrome 49 sur Mac ou Chrome 49 sur Windows sur cette page: http://gaearon.github.io/react-dnd/examples-drag-around-naive.html

Cela se passe-t-il encore pour vous? Quelle version de Chrome utilisez-vous et quel système d'exploitation?

Pouvez-vous également contrôler le comportement du curseur comme décrit ici: http://gaearon.github.io/react-dnd/examples-customize-drop-effects.html?

Je vois le problème dans tous les exemples, sur Chrome 49 sur Mac (toujours 10.10). Au début du glissement, le curseur se transforme en signe plus vert (généralement affiché par cursor: copy ); puis devient le curseur "déplacer".

Je suis capable de reproduire cela sporadiquement dans l'exemple que vous avez lié à @globexdesigns (Chrome 49, OSX 10.11) - il n'apparaît que pendant une fraction de seconde avant de se comporter comme prévu.

Je suppose que c'est soit un court délai entre le cycle de rendu par lots de React et l'implémentation dnd du navigateur (auquel cas nous pourrons peut-être le corriger), soit un bogue dans Chrome. Je vais jouer avec d'autres navigateurs (à moins que quelqu'un ne me batte) et voir si je peux obtenir une repro là-bas.

Je vois la même chose sur Chrome 49 OSX 10.11.4 - apparaît pendant une fraction de seconde puis revient à la normale. Le comportement ne se produit pas pour moi dans Safari ou Firefox.

@EvNaverniouk Je suis sous Chrome 49 et OS X 10.11.4 et oui, je vois toujours le problème, et oui, je vois l'icône de copie de copie lorsque cela est prévu dans ce lien que vous avez référencé http://gaearon.github.io/react -dnd / examples-personnaliser-drop-effects.html

Voir également ce problème dans Chrome 50 sous OS X 10.11.2.

voir également ce Chrome 51 sur OS X 10.10.1

Je vois également cela sur Chrome Version 51 sur OSX 10.11.4.

Edit: après avoir ajouté quelques fonctionnalités supplémentaires implémentant une couche de glissement et inclus correctement le code à l'aide de connectDragPreview et getEmptyImage (), le problème semble avoir disparu pour l'instant.

J'ai vu cela au hasard dans React DnD ainsi que dans d'autres bibliothèques et même simplement en HTML5 brut. Je suppose que cela a à voir avec le fait que nous ne définissons pas effectAllowed dans le dragstart.

Des mises à jour à ce sujet? Face au même problème sur Chrome 53 OSX 10.10.5

Voir la même chose Chrome 54.0.2840.71 10.11.6, des mises à jour?

+1

L'utilisation de {dropEffect: 'copy'} masque le problème (en rendant le plus vert toujours visible); mais ne le résout pas correctement.

De plus, il semble que {dropEffect: 'move'} ne semble pas réussir à faire du curseur un réticule à 4 pointes.

Version Chrome: 55.0.2883.95 (version officielle) (64 bits)

Clôture de ce problème car il ne semble pas être une fonction de cette bibliothèque.

@fredguest avez-vous déjà trouvé une solution à cela?

@Yamikamisama, malheureusement non.

Le bouton vert plus ne s'affiche pas pour moi tant que ma fonction canDrop ne renvoie pas false, puis il apparaît.

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

Cela a fonctionné pour moi sur chrome. Il suffit de le mettre dans les événements "dragstart" et "dragend" car ce sont les seuls à avoir accès à l'objet dataTransfer.

Cela ne m'a pas aidé

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

Cela n'arrive que pendant un instant entre cursor: 'grab' et cursor: 'grabbing'
Cela ne s'affiche malheureusement pas au format gif, mais la photo sous le gif montre le problème

Je rencontre également ce problème. Cela ressemble à un bogue dans Chrome.

+1

+1 version chrome 84.0.4147.89

edit: cela ne se produit que lorsque vous utilisez le code suivant pour ne pas avoir d'aperçu d'image:

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

l'implémentation d'un aperçu résout ce problème