React-dnd: ड्रैग के दौरान कर्सर को कस्टमाइज़ करें

आप संभवतः पूरे शरीर पर cursor शैली (या एप्लिकेशन रूट div ) सेट कर सकते हैं, जबकि isDragging true । isDragging परिवर्तनों को सुनने के लिए आप DragLayer का उपयोग कर सकते हैं।

धन्यवाद, काश कि काम करता! दुर्भाग्य से, कर्सर शैली को कुछ (मैं क्रोम पर हूँ) द्वारा ओवरराइड किया जाता है, यहां तक ​​कि कर्सर शैली को दस्तावेज़.बॉडी पर सेट करते समय और इसे "महत्वपूर्ण" के रूप में चिह्नित किया जाता है। कोई अन्य विचार?

शायद यह सिर्फ HTML5 ड्रैग और ड्रॉप एपीआई कैसे काम करता है। इस मामले में एकमात्र समाधान एक कस्टम बैकएंड बनाना है जो HTML5 ड्रैग और ड्रॉप ईवेंट के बजाय माउस ईवेंट का उपयोग करता है।

मैं उम्मीद कर रहा था कि आप ऐसा नहीं कहेंगे :) धन्यवाद!

मुझे अभी इस मुद्दे के बारे में पता चला है। दुर्भाग्य से, यह खींचते समय आइकन को बदलने में असमर्थ प्रतीत होता है :(

किसी को भी यह हल करने में कामयाब रहे?

इस पर भी जाकर देखा। हाँ ऐसा लगता है कि यह दुख की बात है कि एक ब्राउज़र सीमा है कि DataTransfer.effectAllowed लिए एपीआई केवल मुट्ठी भर विकल्पों का समर्थन करता है:

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

तो इसके आसपास जाने का एकमात्र तरीका है, जैसा कि @gaearon ने उल्लेख किया है, जो कि एक अलग कस्टम बैकएंड का उपयोग करना है: / यह HTML5 बैकएंड प्रलेखन में शामिल होने लायक कुछ हो सकता है क्योंकि यह लोगों के लिए कुछ सहज नहीं हो सकता है।

वैसे एक बहुत गलत लेकिन काम करने वाला समाधान शरीर में dragging वर्ग जोड़ रहा होगा ताकि शरीर और शरीर के अंदर प्रत्येक DOM ऑब्जेक्ट को cursor: grabbing !important । इससे ज्यादा कुछ नहीं होगा।
इसी से मेरा काम बना है:

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

JS का उपयोग करने वाला एक और तरीका कुछ इस तरह हो सकता है:

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

हालांकि यह लगातार काम नहीं कर रहा है ...

मुझे यहां सुझाए गए किसी भी समाधान के लिए काम नहीं करना चाहिए। इस पर कुछ भी अपडेट?

TouchBackend पर स्विच करना और कर्सर सेट करने के लिए css का उपयोग करना मेरे लिए काम किया।

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

.dragging {
  cursor: grabbing
}

TouchBackend पर स्विच करना और कर्सर सेट करने के लिए css का उपयोग करना मेरे लिए काम किया।

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

.dragging {
  cursor: grabbing
}

मेरे लिए काम नहीं कर रहा

+1

कोई इसे हल करने में कामयाब रहा?

TouchBackend पर स्विच करना और कर्सर सेट करने के लिए css का उपयोग करना मेरे लिए काम किया।

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

.dragging {
  cursor: grabbing
}

टचबैक पर स्विच करना मेरे लिए काम कर गया

DnD प्रदाता:

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

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

ड्रैग हैंडलर कार्यान्वयन:

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

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

सीएसएस फ़ाइल

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