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