Google chrome 如果拖动的元素包含chartjs组件,则浮动克隆不会显示在chrome中 代码和盒链接
逐步方案 我正在构建一个仪表板,其中网格的每个可拖动平铺都包含一个图形。这些图是使用chart.js绘制的。虽然我可以通过拖放来更改磁贴的顺序,但如果磁贴包含chart.js图形,则正在拖动的磁贴的浮动参考磁贴不会显示。这仅在Chrome浏览器中发生。对于Firefox和Edge浏览器,它运行良好 实际解决方案 唯一的解决方案是在拖动之前隐藏图表 预期解决方案 如果我能避免在拖动图块的同时隐藏图表,那将是令人惊讶的 firefox和chrome的结果如下所示。闪烁的小故障是来自屏幕录制工具的一些错误,忽略这一点 产生Firefox67(Arch Linux) 导致Chrome74(Arch Linux)匿名窗口没有任何扩展 不同浏览器的可视结果示例可从中获得。 这两个结果都是使用在Arch Linux上运行的Chrome74和Firefox67实现的。 我在Windows中对Chrome有相同的结果,但现在无法确认版本Google chrome 如果拖动的元素包含chartjs组件,则浮动克隆不会显示在chrome中 代码和盒链接,google-chrome,vue.js,chart.js,sortablejs,vuedraggable,Google Chrome,Vue.js,Chart.js,Sortablejs,Vuedraggable,逐步方案 我正在构建一个仪表板,其中网格的每个可拖动平铺都包含一个图形。这些图是使用chart.js绘制的。虽然我可以通过拖放来更改磁贴的顺序,但如果磁贴包含chart.js图形,则正在拖动的磁贴的浮动参考磁贴不会显示。这仅在Chrome浏览器中发生。对于Firefox和Edge浏览器,它运行良好 实际解决方案 唯一的解决方案是在拖动之前隐藏图表 预期解决方案 如果我能避免在拖动图块的同时隐藏图表,那将是令人惊讶的 firefox和chrome的结果如下所示。闪烁的小故障是来自屏幕录制工具的一些
我还尝试了MacOS的Chrome75。浮动磁贴已显示,但在启用图表时,它在页面框架外错位。我所能想到的是:
- 您可以使用
并在Sortable中定义onStart事件forceFallback:true
- 在这种情况下,使用
(ghost元素)并检查其中是否有画布Sortable.ghost
- 如果没有,那么图形就不存在。如果为空,您可以使用此处描述的方法之一检查它是否为空:
- 您可以使用
并在Sortable中定义onStart事件forceFallback:true
- 在这种情况下,使用
(ghost元素)并检查其中是否有画布Sortable.ghost
- 如果没有,那么图形就不存在。如果为空,您可以使用此处描述的方法之一检查它是否为空:
- 我能想到的就是:
- 我要感谢@OwenM的时间和帮助。
在存储库页面上与他进行了反复的交谈之后,他指出了正确的解决方案,并解决了我们最终面临的一些问题
我正在将链接发布到包含最终解决方案的。
虽然有些软件包修复的空间,但解决方案解决了我当前的问题,我可以继续前进
再次感谢@OwenM,非常感谢。
干杯我要感谢@OwenM的时间和帮助。 在存储库页面上与他进行了反复的交谈之后,他指出了正确的解决方案,并解决了我们最终面临的一些问题 我正在将链接发布到包含最终解决方案的。 虽然有些软件包修复的空间,但解决方案解决了我当前的问题,我可以继续前进 再次感谢@OwenM,非常感谢。
干杯这似乎是ChartJS的问题。甚至使用
dataTransfer.setDragImage()
将拖动图像设置到元素也不起作用。并使用Sortable的fallbackforceFallback:true
显示元素,但在图表应该显示的位置有一个空格。这可能是因为Sortable无法克隆画布中的内容,Chrome不允许将其作为拖动图像。感谢@OwenM,这听起来是对问题的一个很好的诊断,forceFallback甚至可能是我问题的临时解决方案。我想知道为什么Firefox和Edge能够克隆画布而Chrome不能?另外,正如我所提到的,MacOS上的Chrome成功地克隆了画布,但拖动的元素被移到了左侧。当Sortable无法克隆画布时,是否可能捕获错误?到目前为止,失败的尝试是沉默的。Cheers把它作为一个答案,因为它不适合评论。这似乎是ChartJS的一个问题。甚至使用dataTransfer.setDragImage()
将拖动图像设置到元素也不起作用。并使用Sortable的fallbackforceFallback:true
显示元素,但在图表应该显示的位置有一个空格。这可能是因为Sortable无法克隆画布中的内容,Chrome不允许将其作为拖动图像。感谢@OwenM,这听起来是对问题的一个很好的诊断,forceFallback甚至可能是我问题的临时解决方案。我想知道为什么Firefox和Edge能够克隆画布而Chrome不能?另外,正如我所提到的,MacOS上的Chrome成功地克隆了画布,但拖动的元素被移到了左侧。当Sortable无法克隆画布时,是否可能捕获错误?到目前为止,失败的尝试是沉默的。Cheers将其作为一个答案,因为它不适合我现在使用的评论forceFallback:isChrome()
其中isChrome
是一种检测浏览器是否为chrome的方法,并且fallbackOnBody:true
是因为chrome的默认浮动克隆,至少在Linux上是如此,对于我的实际应用程序的平铺中的所有其他现有元素,性能相当差。在Firefox和Edge中,它可以正常工作。但是fallbackOnBody
会从互动程序中删除图表。这就引出了一个问题。我们是否可以跳过浮动克隆作为onBody元素(如fallbackOnBody)的默认行为,但不从互动程序中删除图表?回答我的最后一条评论。。。对于fallbackOnBody
图表画布被部分复制,但似乎没有传递任何数据。有什么想法吗?我们现在可以在Github上讨论我现在使用的是forceFallback:isChrome()
其中isChrome
是一种检测浏览器是否为chrome的方法,并且fallbackOnBody:true
,因为chrome的默认浮动克隆,至少在Linux上是如此,对于的平铺中的所有其他现有元素,性能相当差