如果拖动的元素包含 chartjs 组件,浮动克隆不会显示在 chrome 中

Floating clone does not show in chrome if dragged element contains a chartjs component

代码和框link

https://codesandbox.io/s/vue-template-qoo66

一步一步的场景

我正在构建一个仪表板,其中网格的每个可拖动图块都包含一个图表。这些图是使用 chart.js 绘制的。虽然我可以通过拖放来更改图块的顺序,但是如果图块包含 chart.js 图形,则被拖动的图块的浮动参考图块不会显示。这只发生在 Chrome 浏览器中。对于 Firefox 和 Edge 浏览器,它工作正常。

实际解决方案

唯一找到的解决方案是在拖动之前隐藏图表。

预期的解决方案

如果我能避免在拖动图块时隐藏图表,那就太棒了。

firefox 和 chrome 的结果如下所示。闪屏是录屏工具的bug,无视

在 Firefox67(Arch Linux)中的结果

结果 Chrome74 (Arch Linux) 隐身 window 没有任何扩展名

来自 CodeSandbox.

示例的不同浏览器的视觉结果

这两个结果都是在 Arch Linux 上使用 Chrome74 和 Firefox67 运行 获得的。 我在 Windows 中得到了 Chrome 的相同结果,但现在无法确认版本。

我还尝试了 Chrome75 的 MacOS。显示了浮动磁贴,但在启用图表时它在页面框架之外错位了。

我能想到的只有这个:

  • 您使用 forceFallback: true 并在 Sortable
  • 中定义一个 onStart 事件
  • 在那种情况下,你使用 Sortable.ghost(幽灵元素)并检查它是否有一个 canvas 里面
  • 如果没有,则该图不存在。如果是,您可以使用此处描述的方法之一检查它是否为空:How to check if a canvas is blank?

我要感谢@OwenM 的时间和帮助。 在 Vue.Draggable repository page Issue 664 与他反复交谈后,他指出了正确的解决方案并解决了我们最终面临的一些最终问题。

我将 link 发布到包含最终解决方案的 CodeSandbox。 虽然有一些包修复的空间,但该解决方案解决了我当前的问题,我可以继续前进。

再次感谢@OwenM,非常感谢。 干杯