如果拖动的元素包含 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,非常感谢。
干杯
代码和框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,非常感谢。 干杯