0

代码和框链接

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

分步场景

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

实际解决方案

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

预期解决方案

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

Firefox 和 chrome 的结果如下所示。闪烁的故障是屏幕录制工具中的一些错误，请忽略这一点。

结果在 Firefox67 (Arch Linux) firefox-vuedraggable-opt

结果Chrome74（Arch Linux）隐身窗口没有任何扩展 chome-vuedraggable-opt

来自CodeSandbox的示例中不同浏览器的可视化结果。

这两个结果都是使用在 Arch Linux 上运行的 Chrome74 和 Firefox67 实现的。我在 Windows 中对 Chrome 有相同的结果，但现在无法确认版本。

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

4

2 回答 2

1

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

我正在发布包含最终解决方案的CodeSandbox的链接。虽然有一些包修复的空间，但该解决方案解决了我当前的问题，我可以继续前进。

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

于 2019-06-28T04:14:09.600 回答
1

我能想到的只有这样：

  • 您在 Sortable 中使用forceFallback: true并定义 onStart 事件
  • 在那种情况下，您使用Sortable.ghost（幽灵元素）并检查它内部是否有画布
  • 如果没有，则图表不存在。如果是这样，您可以使用此处描述的方法之一检查它是否为空：如何检查画布是否为空白？
于 2019-06-25T22:51:14.347 回答