React-dnd: Sinal de adição verde no Chrome

+1

Não é possível reproduzir este problema no Chrome 49 no Mac ou Chrome 49 no Windows nesta página: http://gaearon.github.io/react-dnd/examples-drag-around-naive.html

Isso ainda está acontecendo para você? Qual versão do Chrome você está usando e qual sistema operacional?

Além disso, você pode controlar o comportamento do cursor conforme descrito aqui: http://gaearon.github.io/react-dnd/examples-customize-drop-effects.html?

Estou vendo o problema em todos os exemplos, no Chrome 49 no Mac (ainda 10.10). Ao iniciar o arrasto, o cursor muda para um sinal de mais verde (geralmente exibido por cursor: copy ); e então se torna o cursor "mover".

Consigo reproduzir isso esporadicamente no exemplo que você vinculou a @globexdesigns (Chrome 49, OSX 10.11) - ele só aparece por uma fração de segundo antes de se comportar conforme o esperado.

Meu palpite é que é um pequeno atraso entre o ciclo de renderização em lote do React e a implementação dnd do navegador (neste caso, podemos ser capazes de consertar) ou um bug no Chrome. Vou brincar com outros navegadores (a menos que alguém me adianta) e ver se consigo uma reprodução lá.

Estou vendo a mesma coisa no Chrome 49 OSX 10.11.4 - aparece por uma fração de segundo e depois volta ao normal. O comportamento não acontece para mim no Safari ou Firefox.

@EvNaverniouk Estou no Chrome 49 e OS X 10.11.4 e sim, ainda estou vendo o problema e sim, vejo o ícone de cópia de cópia quando esperado neste link que você referiu http://gaearon.github.io/react -dnd / examples-customize-drop-effects.html

Também vejo esse problema no Chrome 50 no OS X 10.11.2.

também vendo este Chrome 51 no OS X 10.10.1

Também estou vendo isso no Chrome versão 51 no OSX 10.11.4.

Editar: depois de adicionar mais algumas funcionalidades implementando uma camada de arrastar e incluindo corretamente o código usando connectDragPreview e getEmptyImage (), o problema parece ter desaparecido por enquanto.

Eu vi isso aleatoriamente no React DnD, bem como em outras bibliotecas e até mesmo em HTML5 bruto, arrastável. Meu palpite é que isso tem a ver com a não configuração de effectAllowed no dragstart.

Alguma atualização sobre isso? Enfrentando o mesmo problema no Chrome 53 OSX 10.10.5

Vendo a mesma coisa Chrome 54.0.2840.71 10.11.6, alguma atualização?

+1

Usar {dropEffect: 'copy'} mascara o problema (tornando o sinal positivo verde sempre visível); mas não o corrige adequadamente.

Além disso, parece que {dropEffect: 'move'} não parece transformar o cursor em uma cruz de 4 pontas.

Versão do Chrome: 55.0.2883.95 (versão oficial) (64 bits)

Fechando esta questão, pois não parece ser uma função desta biblioteca.

@fredguest , você já encontrou uma solução para isso?

@Yamikamisama infelizmente não.

O botão verde de adição não aparece para mim até que minha função canDrop retorne falso e, em seguida, ele aparece.

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

Isso funcionou para mim no cromo. Basta colocá-lo nos eventos "dragstart" e "dragend", pois esses são os únicos que têm acesso ao objeto dataTransfer.

Isso não me ajudou

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

Acontece apenas por um momento entre cursor: 'grab' e cursor: 'grabbing'
Infelizmente não aparece no formato gif, mas a imagem abaixo do gif mostra o problema

Também estou tendo esse problema. Parece um bug no Chrome.

+1

+1 Chrome versão 84.0.4147.89

editar: isso só acontece ao usar o seguinte código para não ter uma imagem de visualização:

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

implementar uma visualização resolve este problema