React-dnd: Personalize o cursor ao arrastar

Você provavelmente pode definir um estilo cursor em todo o corpo (ou raiz do aplicativo div ) enquanto isDragging é true . Você pode usar DragLayer para ouvir isDragging alterações.

Obrigado, gostaria que funcionasse! Infelizmente, o estilo do cursor é substituído por algo (estou no Chrome), mesmo ao definir o estilo do cursor para document.body e marcá-lo como "! Importante". Alguma outra ideia?

Talvez seja apenas como a API de arrastar e soltar HTML5 funciona. Nesse caso, a única solução é criar um back-end personalizado que use eventos de mouse em vez de eventos de arrastar e soltar HTML5.

Eu esperava que você não dissesse isso :) Obrigado!

Acabei de descobrir sobre esse problema. Infelizmente, parece que não é possível mudar o ícone enquanto arrasta :(

Alguém conseguiu resolver isso?

Também fui e investiguei isso. Sim, parece que esta é, infelizmente, uma limitação do navegador, pois a API para DataTransfer.effectAllowed suporta apenas um punhado de opções:

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed

Portanto, a única maneira de contornar isso é, como @gaearon mencionou, usar um back-end personalizado diferente: / Isso pode valer a pena incluir na documentação do back-end HTML5, pois pode não ser algo intuitivo para as pessoas.

Bem, uma solução muito errada, mas funcional, seria adicionar uma classe dragging ao corpo para que o corpo e todos os objetos DOM dentro do corpo recebessem cursor: grabbing !important . Nada irá senão substituí-lo.
Isto é o que funcionou para mim:

:global {
    body.dragging,
    body.dragging * {
        cursor: url('./assets/cursors/grabbing.cur'), move !important;
    }
}

Outra abordagem usando JS poderia ser algo assim:

window.addEventListener('drag', () => {
  document.body.style.cursor = 'grabbing';
}, true)

Não parece estar funcionando de forma consistente ...

Não consigo fazer com que nenhuma das soluções sugeridas funcione. Alguma atualização sobre isso?

Mudar para TouchBackend e usar css para definir o cursor funcionou para mim.

<DndProvider backend={TouchBackend} options={{ enableTouchEvents: false, enableMouseEvents: true }}>
  <div className=`my-app ${isDragging ? 'dragging' : ''}`>
      .... draglayers here
  </div>
</DndProvider>

.dragging {
  cursor: grabbing
}

Mudar para TouchBackend e usar css para definir o cursor funcionou para mim.

<DndProvider backend={TouchBackend} options={{ enableTouchEvents: false, enableMouseEvents: true }}>
  <div className=`my-app ${isDragging ? 'dragging' : ''}`>
      .... draglayers here
  </div>
</DndProvider>

.dragging {
  cursor: grabbing
}

não está funcionando para mim

+1

alguem conseguiu resolver isso?

Mudar para TouchBackend e usar css para definir o cursor funcionou para mim.

<DndProvider backend={TouchBackend} options={{ enableTouchEvents: false, enableMouseEvents: true }}>
  <div className=`my-app ${isDragging ? 'dragging' : ''}`>
      .... draglayers here
  </div>
</DndProvider>

.dragging {
  cursor: grabbing
}

mudar para TouchBackend funcionou para mim

Provedor DnD:

import { DndProvider } from 'react-dnd';
import { TouchBackend } from 'react-dnd-touch-backend';

...
<DndProvider backend={TouchBackend} options={{enableMouseEvents: true}}>
...
</DndProvider>

Implementação de manipuladores de arrasto:

    import { useDrag, useDrop } from 'react-dnd';
    ....

    const [...] = useDrag({
      ...
      begin: () => {
        document.body.classList.add('dragging');
        ...
     },
      end: () => {
        document.body.classList.remove('dragging');
        ...
      },
    });

arquivo css

   body.dragging: {
      cursor: crosshair !important;
   },