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

Question

代码和框链接

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

分步场景

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

实际解决方案

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

期望的解决方案

如果我能避免在拖动图块时隐藏图表，那将是惊人的。

firefox和chrome的结果如下所示。闪烁的毛刺是屏幕录制工具中的一些错误，无视该错误。

Firefox67（Arch Linux）中的结果

在Chrome74（Arch Linux）隐身窗口中显示的结果，没有任何扩展名

来自不同浏览器的视觉结果来自CodeSandbox上的示例。

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

我还尝试了Mac OS的Chrome75。显示了浮动图块，但是启用图表后，该图块已移出页面框架。

Answer 1

我唯一能想到的是：

• 您使用forceFallback: true并在Sortable中定义onStart事件
• 在这种情况下，您使用Sortable.ghost（ghost元素）并检查其中是否包含画布
• 如果不存在，则该图不存在。如果是这样，则可以使用此处描述的方法之一检查它是否为空：How to check if a canvas is blank?

Answer 2

我要感谢@OwenM的时间和帮助。 在Vue.Draggable存储库页面Issue 664与他进行了一些来回对话之后，他指出了正确解决方案的途径，并解决了我们最终面临的一些最终问题。

我正在发布指向包含最终解决方案的CodeSandbox的链接。 尽管仍有一些软件包修复空间，但是该解决方案解决了我当前的问题，我可以继续。

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