佟睦天

Right, I have also encountered this situation. When the input method pops up at the pad end, this event will also be triggered if you enter non English, and the...

我用了相似的一种解决方法，思路是相似的。在鼠标onMouseEnter进入input框时，解绑drag元素上的ref，将标签中的ref赋值为null。在鼠标onMouseLeave时再恢复。但不推荐这样做，而且需要写注释，否则后来者无法看懂。需要注意的是，chrome上用此方法无问题，但 safari and FF 上也需要测试一下，如果无缺陷即可行，如果有缺陷则需另寻他法。 > 编辑2： 如果有人遇到同样的问题： 我已经找到了解决方法。它确实解决了问题，但不是推荐的方法。 > > ``` > useLayoutEffect(() => { > if (rootRef.current) { > if (disabled) { > rootRef.current.setAttribute('draggable', 'false'); > } else...

我用了一个hacking解决了这个问题，就像给盘中的食物包裹一层保鲜膜一样，在svg上盖了一层元素，宽高相同，z-index设置的比svg高，opacity为0，绝对定位在svg上（脱离标准流）。拖拽时，表面上拖拽的是svg图标，实际上鼠标点击的是svg上面的“保鲜膜”，这个问题就被解决了。但并不推荐这种做法，我是因为时间的缘故，才无法深入研究而使用了hacking。

我用了如下方式解决chrome预览问题 ``` useEffect(() => { // 不同浏览器的兼容性处理 if (IS_CHROME) { // 去除默认预览样式；captureDraggingState：是否捕获 dragPreview(ref, { captureDraggingState: true }); } }); ``` 但该配置若不做浏览器区分，则 FF and safari 上会产生严重的拖动预览问题。 FF上将拖动预览区域的 opacity 设置的高一点，在拖动预览的 dom 元素上设置背景颜色与drop底板颜色相同，防止预览样式变成镂空状态，使用默认拖动预览即可。...

我也遇到了相同的情况，但产生的原因可能不同。我的情况是：在一个列表中的每一项的左侧都有一个 hover 时才展示的 icon，只有按住 icon 才能触发拖拽。而在 safari 中，该功能与此 issues 标题所描述相同。经排查发现，如果将这个 icon 换成一个字符串，则无此缺陷。在查阅 react-dnd 的 issues 中发现，可能是由于该 icon 为 svg 的缘故，有的同学使用 png 就可以解决，但我没有实现。 我首先是使用了一个 div 包裹整个拖动区域，然后将 useDrag 的返回值之一 drag 绑定在该 div...