React-dnd: Chrome 中的错误拖动预览

创建于 2017-07-19 · 20评论 · 资料来源: react-dnd/react-dnd

1) 下面的截图显示了与dragPreview 相关的奇怪问题。在我的情况下，可拖动表行节点既是源又是目标。由于某些原因，拖动预览不仅包含源节点截图，还包含下面的所有行！同时，仅对 1 个源调用拖动操作，并且放置处理程序中的交换工作正常。

2）还有一个奇怪的错误连接woth调试：当我将断点放入dragSource节点的render方法并继续运行应用程序时，我在拖动过程中出现错误

未捕获的错误：掉落后无法调用悬停。
在不变（browser.js？72b5:40）
在 DragDropManager.hover (dragDrop.js?3115:111)
在 Object.eval [作为悬停] (DragDropManager.js?b07f:92)
在 HTML5Backend.handleTopDragEnter (HTML5Backend.js?5f50:495)

但是上面描述的dragPreview 问题消失了并且拖放工作正常（一次）。然后在放置事件“拖动时无法调用 beginDrag”错误之后的某处发生并且拖动停止工作。

未捕获的错误：拖动时无法调用 beginDrag。
在不变（browser.js？72b5:40）
在 DragDropManager.beginDrag (dragDrop.js?3115:50)
在 Object.eval [as beginDrag] (DragDropManager.js?b07f:92)
在 HTML5Backend.handleTopDragStart (HTML5Backend.js?5f50:361)

错误仅出现在 Chrome（57 和 59）中。有任何想法吗？

资料来源

tTwisTt

👍8

最有用的评论

我通过将 transform: translate3d(0, 0, 0) 添加到我的包含元素来解决了 chrome 上的这个问题。

RahulRameshNarayan 于 2018-11-27

👍51 ❤11 🎉10 🚀6 👀1

所有20条评论

@tTwisTt我正面临着这个问题，你找到解决办法了吗？

kaiomagalhaes 于 2017-10-02

@kaiomagalhaes在我的情况下，由于行（单元格内容）的子元素之一的高度实际上大于行高，但被可见性隐藏：隐藏在css中，因此我遇到了这个问题。所以dragSource 有行宽和隐藏控件的高度。我希望你会发现这很有帮助。

tTwisTt 于 2017-10-04

👍1

@tTwisTt我可以确认，溢出也会发生同样的情况：隐藏。有没有办法在没有错误预览的情况下拖动这些元素？

matthiaskrieft 于 2017-10-04

👍12

这个issue已经关闭了，但是好像还是个问题，是不是应该重新打开？

canastro 于 2018-10-02

我也有同样的问题 - 当我开始拖动时，预览太大并且不尊重应该被溢出隐藏的部分。
在这里您可以看到我如何拖动一个元素，但它旁边的“边框”也是预览的一部分。

编辑：我能够通过不在元素中使用相对定位的图像而是使用带有背景图像的 div 来修复它。
因此，似乎是从父元素伸出的内部 img 元素导致了问题。

olee 于 2018-10-05

当我尝试拖动折叠的 div 包裹材料 ui 扩展面板时，我遇到了类似的问题，它最终给了我一个预览，即展开的面板的高度，但包括面板周围页面的元素，因为可见部分面板的尺寸小于预览。

willbuckingham 于 2018-10-30

我通过将 transform: translate3d(0, 0, 0) 添加到我的包含元素来解决了 chrome 上的这个问题。

RahulRameshNarayan 于 2018-11-27

👍51 ❤11 🎉10 🚀6 👀1

@RahulRameshNarayan这也对我
知道为什么这可以解决问题吗？

jsyvino 于 2018-11-27

@jsyvino是 chrome 上的重绘问题。 translate3d 在该元素上强制执行更好的硬件加速。这也是人们用来解决更高分辨率屏幕中滚动元素闪烁的一种技巧。您可以在以下文章中进一步阅读有关此主题的信息。

让我们玩转硬件加速的 CSS-
https://www.smashingmagazine.com/2012/06/play-with-hardware-accelerated-css/

Chrome 中的加速渲染
https://www.html5rocks.com/en/tutorials/speed/layers/

简化油漆复杂性并减少油漆区域
https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas

RahulRameshNarayan 于 2018-12-04

👍2

transform3d(0,0,0) 修复了整个页面截图的问题，但元素位置错误。
DragIssue

这个问题只出现在基于铬的浏览器上。
有没有人遇到过类似的问题，你是如何解决的？

makr11 于 2019-06-12

👍10

在 Chrome 75 上使用 Material-UI ListItem 作为可拖动节点时，我也遇到了这个问题。我认为溢出包含的 Ripple 元素：隐藏是导致大小不匹配的原因。

正如@ makr11提到，@RahulRameshNarayan的修复程序以某种方式解决这个问题（由拖动预览隐藏周围的元素，貌似），但它仍然有位置偏移，它会如同这些元素是可见的，所以它仍然是'破' 在我看来。

有没有人明白这里的潜在问题是什么，似乎是在 DOM 或 Native/HTML5 拖动预览生成级别？很想解决这个问题。

mismith 于 2019-06-12

👍2

同样在这里，我在 Chrome 75 上遇到了这个问题，在 Firefox 上工作正常......这应该重新打开！

faraonkicu 于 2019-06-26

👍1

我的用例是特定的，但也许它会帮助某人，我使用使用 react-dnd 的速度仪表板，并且内部小部件（这是一个可拖动的组件）呈现为 react-chart-js。当chart-js 在widget 中呈现时出现问题。我只是设置了当小部件可拖动时，基本 div 在小部件内部呈现，而不是图表 js 组件。

同样，它非常具体，我不是该主题的专家，但也许这会对某人有所帮助。

makr11 于 2019-06-28

问题仍然重现（Chrome 75.0.3770.100），但通过添加transform: translate3d(0)来包含元素解决。谢谢@RahulRameshNarayan