React-dnd: Signo más verde en Chrome

+1

No se puede reproducir este problema en Chrome 49 en Mac o Chrome 49 en Windows en esta página: http://gaearon.github.io/react-dnd/examples-drag-around-naive.html

¿Todavía te está pasando esto? ¿Qué versión de Chrome estás usando y qué sistema operativo?

Además, ¿puede controlar el comportamiento del cursor como se describe aquí: http://gaearon.github.io/react-dnd/examples-customize-drop-effects.html?

Veo el problema en todos los ejemplos, en Chrome 49 en Mac (todavía 10.10). Al iniciar el arrastre, el cursor cambia a un signo más verde (generalmente mostrado por cursor: copy ); y luego se convierte en el cursor "mover".

Puedo reproducir esto esporádicamente en el ejemplo que vinculó a @globexdesigns (Chrome 49, OSX 10.11); solo aparece durante una fracción de segundo antes de comportarse como se esperaba.

Supongo que es un pequeño retraso entre el ciclo de renderizado por lotes de React y la implementación de dnd del navegador (en cuyo caso podríamos solucionarlo) o un error en Chrome. Jugaré con otros navegadores (a menos que alguien me gane) y veré si puedo obtener una reproducción allí.

Veo lo mismo en Chrome 49 OSX 10.11.4: aparece durante una fracción de segundo y luego vuelve a la normalidad. El comportamiento no me ocurre en Safari o Firefox.

@EvNaverniouk Estoy en Chrome 49 y OS X 10.11.4 y sí, sigo viendo el problema, y ​​sí, veo el ícono de copiar copia cuando se esperaba en este enlace al que hiciste referencia http://gaearon.github.io/react -dnd / examples-personalizar-drop-effects.html

También viendo este problema en Chrome 50 en OS X 10.11.2.

también viendo este Chrome 51 en OS X 10.10.1

También veo esto en Chrome versión 51 en OSX 10.11.4.

Editar: después de agregar algunas funciones más implementando una capa de arrastre e incluir correctamente el código usando connectDragPreview y getEmptyImage (), el problema parece haber desaparecido por ahora.

He visto esto al azar en React DnD, así como en otras bibliotecas e incluso solo HTML5 sin formato arrastrable. Supongo que tiene que ver con que no establezcamos effectAllowed en el dragstart.

¿Alguna actualización sobre esto? Frente al mismo problema en Chrome 53 OSX 10.10.5

Viendo lo mismo Chrome 54.0.2840.71 10.11.6, ¿alguna actualización?

+1

El uso de {dropEffect: 'copy'} enmascara el problema (haciendo que el signo más verde esté siempre visible); pero no lo arregla correctamente.

Además, parece que {dropEffect: 'move'} no parece convertir correctamente el cursor en una cruz de 4 puntas.

Versión de Chrome: 55.0.2883.95 (compilación oficial) (64 bits)

Cerrando este tema ya que no parece ser una función de esta biblioteca.

@fredguest , ¿alguna vez encontró una solución para esto?

@Yamikamisama lamentablemente no.

El botón verde más no me aparece hasta que mi función canDrop devuelve falso, luego aparece.

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

Esto funcionó para mí en Chrome. Simplemente colóquelo en los eventos "dragstart" y "dragend", ya que son los únicos que tienen acceso al objeto dataTransfer.

Esto no me ayudó

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

Ocurre solo por un momento entre cursor: 'grab' y cursor: 'grabbing'
Desafortunadamente, no se muestra en formato gif, pero la imagen debajo del gif muestra el problema

También estoy experimentando este problema. Parece un error en Chrome.

+1

+1 versión de Chrome 84.0.4147.89

editar: esto solo sucede cuando se usa el siguiente código para no tener una imagen de vista previa:

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

implementar una vista previa resuelve este problema