React-dnd: 在拖动过程中自定义光标

您可能会在整个主体（或应用程序根目录div ）上设置cursor样式，而isDragging是true 。 您可以使用DragLayer收听isDragging更改。

谢谢，我希望能成功！ 不幸的是，即使将光标样式设置为document.body并将其标记为“！important”，光标样式也会被某些内容覆盖（我在Chrome上）。 还有其他想法吗？

也许这就是HTML5拖放API的工作方式。 在这种情况下，唯一的解决方案是创建一个使用鼠标事件而不是HTML5拖放事件的自定义后端。

我希望您不会这么说:)谢谢！

我刚刚发现了这个问题。 不幸的是，拖动:(时似乎无法更改图标

有人设法解决这个问题吗？

也去看了看。 是的，这似乎是对浏览器的限制，因为DataTransfer.effectAllowed的API仅支持少数几个选项：

https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer/effectAllowed

因此，解决此问题的唯一方法是，如@gaearon所述，这是使用不同的自定义后端：//这可能值得在HTML5后端文档中包含，因为这可能对人们而言并不直观。

嗯，一个非常错误但可行的解决方案是在主体中添加dragging类，以便主体和主体中的每个DOM Object都将获得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;
   },