React-dnd: Personnalisez le curseur pendant le glissement

Vous pouvez probablement définir un style cursor sur tout le corps (ou la racine de l'application div ) alors que isDragging vaut true . Vous pouvez utiliser DragLayer pour écouter les changements de isDragging .

Merci, je souhaite que cela fonctionne! Malheureusement, le style du curseur est remplacé par quelque chose (je suis sur Chrome), même lorsque vous définissez le style du curseur sur document.body et que vous le marquez comme "! Important". D'autres idées?

C'est peut-être simplement ainsi que fonctionne l'API HTML5 glisser-déposer. Dans ce cas, la seule solution consiste à créer un backend personnalisé qui utilise des événements de souris au lieu d'événements de glisser-déposer HTML5.

J'espérais que vous ne diriez pas ça :) Merci!

Je viens de découvrir ce problème. Malheureusement, il ne semble pas possible de changer l'icône en faisant glisser :(

Quelqu'un a réussi à résoudre ce problème?

Est également allé et a examiné cela. Oui, il semble que ce soit malheureusement une limitation du navigateur dans la mesure où l'API pour DataTransfer.effectAllowed ne prend en charge qu'une poignée d'options:

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

Donc, le seul moyen de contourner ce problème est, comme

Eh bien, une solution très fausse mais qui fonctionne serait d'ajouter une classe dragging au corps afin que ce corps et chaque objet DOM à l'intérieur du corps obtiennent cursor: grabbing !important . Rien ne le fera passer outre.
C'est ce qui a fonctionné pour moi:

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

Une autre approche utilisant JS pourrait être quelque chose comme ceci:

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

Cependant, cela ne semble pas fonctionner de manière cohérente ...

Je ne peux faire fonctionner aucune des solutions suggérées ici. Quelque chose de mis à jour à ce sujet?

Passer à TouchBackend et utiliser css pour définir le curseur a fonctionné pour moi.

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

.dragging {
  cursor: grabbing
}

Passer à TouchBackend et utiliser css pour définir le curseur a fonctionné pour moi.

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

.dragging {
  cursor: grabbing
}

ne travaille pas pour moi

+1

quelqu'un a réussi à résoudre ce problème?

Passer à TouchBackend et utiliser css pour définir le curseur a fonctionné pour moi.

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

.dragging {
  cursor: grabbing
}

le passage à TouchBackend a fonctionné pour moi

Fournisseur DnD:

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

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

Implémentation des gestionnaires de glisser:

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

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

fichier css

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