React-dnd: Sesuaikan kursor selama menyeret

Anda mungkin dapat menetapkan gaya cursor di seluruh tubuh (atau root aplikasi div ) sementara isDragging adalah true . Anda dapat menggunakan DragLayer untuk mendengarkan isDragging perubahan.

Terima kasih, saya berharap itu berhasil! Sayangnya, gaya kursor diganti oleh sesuatu (saya menggunakan Chrome), bahkan saat menyetel gaya kursor ke document.body dan menandainya sebagai "! Penting". Ada ide lain?

Mungkin itu hanya cara kerja API seret dan lepas HTML5. Dalam hal ini, satu-satunya solusi adalah membuat backend khusus yang menggunakan peristiwa mouse, bukan peristiwa seret dan lepas HTML5.

Saya berharap Anda tidak akan mengatakan itu :) Terima kasih!

Saya baru tahu tentang masalah ini. Sayangnya, tampaknya tidak memungkinkan untuk mengubah ikon sambil menyeret :(

Adakah yang berhasil menyelesaikan ini?

Juga pergi dan melihat ini. Ya, sayangnya ini adalah batasan browser karena API untuk DataTransfer.effectAllowed hanya mendukung beberapa opsi:

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

Jadi satu-satunya cara untuk menyiasatinya adalah, seperti yang disebutkan @gaearon , menggunakan backend khusus yang berbeda: / Ini mungkin sesuatu yang layak disertakan dalam dokumentasi backend HTML5 karena itu mungkin bukan sesuatu yang intuitif bagi orang-orang.

Nah solusi yang sangat salah tetapi berhasil akan menambahkan kelas dragging ke tubuh sehingga tubuh itu dan setiap Objek DOM di dalam tubuh akan mendapatkan cursor: grabbing !important . Tidak ada yang akan menggantikannya.
Inilah yang berhasil untuk saya:

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

Pendekatan lain yang menggunakan JS bisa jadi seperti ini:

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

Ini tampaknya tidak bekerja secara konsisten ...

Saya tidak bisa mendapatkan solusi yang disarankan di sini untuk bekerja. Ada kabar terbaru tentang ini?

Beralih ke TouchBackend & menggunakan css untuk menyetel kursor berfungsi untuk saya.

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

.dragging {
  cursor: grabbing
}

Beralih ke TouchBackend & menggunakan css untuk menyetel kursor berfungsi untuk saya.

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

.dragging {
  cursor: grabbing
}

tidak bekerja untuk saya

+1

seseorang berhasil menyelesaikan ini?

Beralih ke TouchBackend & menggunakan css untuk menyetel kursor berfungsi untuk saya.

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

.dragging {
  cursor: grabbing
}

beralih ke TouchBackend berhasil untuk saya

Penyedia DnD:

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

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

Implementasi penangan drag:

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

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

file css

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