React-dnd: ドラッグ中にカーソルをカスタマイズする

isDraggingがtrueに対し、おそらく全身（またはアプリケーションルートdiv ）にcursorスタイルを設定できます。 DragLayerを使用して、 isDragging変更を聞くことができます。

ありがとう、私はそれがうまくいったことを望みます！ 残念ながら、カーソルスタイルをdocument.bodyに設定して「！important」としてマークした場合でも、カーソルスタイルは何かによって上書きされます（私はChromeを使用しています）。 他のアイデアはありますか？

多分それはHTML5ドラッグアンドドロップAPIがどのように機能するかです。 この場合の唯一の解決策は、HTML5のドラッグアンドドロップイベントの代わりにマウスイベントを使用するカスタムバックエンドを作成することです。

私はあなたがそれを言わないことを望んでいました:)ありがとう！

私はこの問題について知りました。 残念ながら、ドラッグ中にアイコンを変更することはできないようです:(

誰かがこれを解決することができましたか？

また、これを調べました。 はい、これは残念ながらブラウザの制限のようです。 DataTransfer.effectAllowedのAPIは、ほんの一握りのオプションしかサポートしていません。

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;
   },