React-dnd: Personaliza el cursor durante el arrastre

Probablemente pueda establecer un estilo cursor en todo el cuerpo (o raíz de la aplicación div ) mientras que isDragging es true . Puede usar DragLayer para escuchar los cambios de isDragging .

Gracias, deseo que haya funcionado! Desafortunadamente, el estilo del cursor es anulado por algo (estoy en Chrome), incluso al configurar el estilo del cursor en document.body y marcarlo como "! Important". ¿Alguna otra idea?

Tal vez sea solo cómo funciona la API de arrastrar y soltar HTML5. En este caso, la única solución es crear un backend personalizado que utilice eventos de mouse en lugar de eventos de arrastrar y soltar HTML5.

Esperaba que no dijeras eso :) ¡Gracias!

Me acabo de enterar de este problema. Desafortunadamente, parece que no es posible cambiar el ícono mientras se arrastra :(

¿Alguien logró resolver esto?

También fue y examinó esto. Sí, parece que esta es una limitación del navegador, ya que la API de DataTransfer.effectAllowed solo admite un puñado de opciones:

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

Entonces, la única forma de evitar esto es, como mencionó @gaearon , que es usar un backend personalizado diferente: / Esto podría ser algo que valga la pena incluir en la documentación del backend HTML5, ya que podría no ser algo intuitivo para las personas.

Bueno, una solución muy incorrecta pero que funciona sería agregar una clase dragging al cuerpo para que el cuerpo y todos los objetos DOM dentro del cuerpo obtengan cursor: grabbing !important . Nada lo anulará.
Esto es lo que funcionó para mí:

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

Otro enfoque que usa JS podría ser algo como esto:

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

Sin embargo, no parece funcionar de manera constante ...

No puedo hacer que ninguna de las soluciones sugeridas aquí funcione. ¿Algo actualizado sobre esto?

Cambiar a TouchBackend y usar css para configurar el cursor funcionó para mí.

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

.dragging {
  cursor: grabbing
}

Cambiar a TouchBackend y usar css para configurar el cursor funcionó para mí.

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

.dragging {
  cursor: grabbing
}

no funciona para mi

+1

alguien logró resolver esto?

Cambiar a TouchBackend y usar css para configurar el cursor funcionó para mí.

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

.dragging {
  cursor: grabbing
}

cambiar a TouchBackend funcionó para mí

Proveedor de DnD:

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

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

Implementación de controladores de arrastre:

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

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

archivo css

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