React-dnd: Настроить курсор во время перетаскивания

Вероятно, вы можете установить стиль cursor для всего тела (или корневого div приложения isDragging - это true . Вы можете использовать DragLayer для прослушивания изменений isDragging .

Спасибо, желаю, чтобы это сработало! К сожалению, стиль курсора чем-то переопределяется (я использую Chrome) даже при установке стиля курсора на document.body и пометке его как «! Important». Есть другие идеи?

Возможно, дело в том, как работает API перетаскивания HTML5. В этом случае единственное решение - создать собственный сервер, который использует события мыши вместо событий перетаскивания HTML5.

Я надеялся, что ты так не скажешь :) Спасибо!

Я только что узнал об этой проблеме. К сожалению, изменить значок во время перетаскивания невозможно :(

Кому-нибудь удалось это решить?

Также пошел и изучил это. Да, похоже, это, к сожалению, ограничение браузера, поскольку API для 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
}

переход на 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;
   },