React-dnd: تخصيص المؤشر أثناء السحب

يمكنك على الأرجح تعيين نمط cursor على كامل الجسم (أو جذر التطبيق div ) بينما isDragging هو true . يمكنك استخدام DragLayer للاستماع إلى تغييرات isDragging .

شكرا ، أتمنى أن يعمل! لسوء الحظ ، يتم تجاوز نمط المؤشر بشيء (أنا على Chrome) ، حتى عند تعيين نمط المؤشر على document.body ووضع علامة عليه "! مهم". أي أفكار أخرى؟

ربما تكون طريقة عمل واجهة برمجة تطبيقات سحب وإفلات HTML5. في هذه الحالة ، الحل الوحيد هو إنشاء خلفية مخصصة تستخدم أحداث الماوس بدلاً من أحداث السحب والإفلات بتنسيق HTML5.

كنت أتمنى ألا تقول ذلك :) شكرًا!

لقد اكتشفت هذه المشكلة للتو. لسوء الحظ ، يبدو أنه من غير الممكن تغيير الرمز أثناء السحب :(

أي شخص تمكن من حل هذا؟

ذهب أيضا ونظر في هذا. نعم ، يبدو أن هذا للأسف هو أحد قيود المتصفح لأن واجهة برمجة التطبيقات لـ DataTransfer.effectAllowed تدعم فقط عددًا قليلاً من الخيارات:

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

لذا فإن الطريقة الوحيدة للتغلب على هذا ، كما ذكر gaearon ، هي استخدام خلفية خلفية مخصصة مختلفة: / قد يكون هذا شيئًا يستحق

حسنًا ، الحل الخاطئ جدًا ولكنه عملي هو إضافة فئة 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
}

التحول إلى TouchBackend يعمل بالنسبة لي

مزود 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');
        ...
      },
    });

ملف css

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