React-dnd: Chrome中的绿色加号

+1

在此页面上，无法在Mac上的Chrome 49或Windows上的Chrome 49上重现此问题： http :

这还在为您发生吗？ 您使用的是哪个版本的Chrome，以及哪个操作系统？

另外，您是否可以按以下说明控制光标行为： http :

我在所有示例中都看到了这个问题，在Mac上的Chrome 49（仍为10.10）上。 拖动开始时，光标变为绿色加号（通常由cursor: copy ）； 然后成为“移动”光标。

我可以在您链接@globexdesigns （Chrome 49，OSX 10.11）的示例中偶尔复制此

我的猜测是，这可能是React的批处理渲染周期与浏览器的dnd实现之间的短暂延迟（在这种情况下，我们可能可以修复它）或Chrome中的错误。 我将与其他浏览器一起玩（除非有人击败我），看看我是否可以在那里找到一个复制者。

我在Chrome 49 OSX 10.11.4上看到了相同的内容-出现了一秒钟，然后恢复正常。 在Safari或Firefox中，这种行为不会发生。

@EvNaverniouk我使用的是Chrome 49和OS X 10.11.4，是的，仍然可以看到问题，是的，在您引用http://gaearon.github.io/react的此链接中，按预期可以看到复制图标

在OS X 10.11.2的Chrome 50中也看到了此问题。

在OS X 10.10.1上也看到了这个Chrome 51

我还在OSX 10.11.4的Chrome版本51上看到了这一点。

编辑：添加了一些其他功能，实现了一个拖动层，并使用connectDragPreview和getEmptyImage（）正确包含了代码之后，问题似乎已经消失了。

我已经在React DnD，其他库甚至是可拖动的原始HTML5中随机看到了这一点。 我的猜测是，这与我们没有在dragstart中设置effectAllowed有关。

有任何更新吗？ 在Chrome 53 OSX 10.10.5上遇到相同的问题

看到相同的东西Chrome 54.0.2840.71 10.11.6，是否有任何更新？

+1

使用{dropEffect: 'copy'}掩盖了问题（通过使绿色加号始终可见）； 但无法正确解决。

此外，似乎{dropEffect: 'move'}似乎没有成功地使光标成为四点十字形。

Chrome版本：55.0.2883.95（正式版本）（64位）

解决此问题，因为它似乎不是此库的功能。

@fredguest您是否找到解决方案？

@Yamikamisama可悲的是没有。

在我的canDrop函数返回false之前，绿色加号按钮对我不显示，然后出现。

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

这对我来说适合Chrome。 只需将其放在“ dragstart”和“ dragend”事件中，因为它们是唯一有权访问dataTransfer对象的事件。

这对我没有帮助

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

它只会在cursor: 'grab'和cursor: 'grabbing'之间的一刻发生
不幸的是，它没有以gif格式显示，但是gif下面的图片显示了问题

我也遇到了这个问题。 看起来像Chrome中的错误。

+1

+1 Chrome版本84.0.4147.89

编辑：仅在使用以下代码时没有预览图像时会发生这种情况：

useEffect(() => {
    preview(getEmptyImage(), { captureDraggingState: true });
  }, [preview]);

实施预览解决了这个问题