Warning: file_get_contents(/data/phpspider/zhask/data//catemap/6/google-chrome/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/vue.js/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Google chrome 如果拖动的元素包含chartjs组件,则浮动克隆不会显示在chrome中 代码和盒链接_Google Chrome_Vue.js_Chart.js_Sortablejs_Vuedraggable - Fatal编程技术网

Google chrome 如果拖动的元素包含chartjs组件,则浮动克隆不会显示在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的结果如下所示。闪烁的小故障是来自屏幕录制工具的一些

逐步方案 我正在构建一个仪表板,其中网格的每个可拖动平铺都包含一个图形。这些图是使用chart.js绘制的。虽然我可以通过拖放来更改磁贴的顺序,但如果磁贴包含chart.js图形,则正在拖动的磁贴的浮动参考磁贴不会显示。这仅在Chrome浏览器中发生。对于Firefox和Edge浏览器,它运行良好

实际解决方案 唯一的解决方案是在拖动之前隐藏图表

预期解决方案 如果我能避免在拖动图块的同时隐藏图表,那将是令人惊讶的

firefox和chrome的结果如下所示。闪烁的小故障是来自屏幕录制工具的一些错误,忽略这一点

产生Firefox67(Arch Linux)

导致Chrome74(Arch Linux)匿名窗口没有任何扩展

不同浏览器的可视结果示例可从中获得。 这两个结果都是使用在Arch Linux上运行的Chrome74和Firefox67实现的。 我在Windows中对Chrome有相同的结果,但现在无法确认版本


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

我所能想到的是:

  • 您可以使用
    forceFallback:true
    并在Sortable中定义onStart事件
  • 在这种情况下,使用
    Sortable.ghost
    (ghost元素)并检查其中是否有画布
  • 如果没有,那么图形就不存在。如果为空,您可以使用此处描述的方法之一检查它是否为空:

    • 我能想到的就是:

      • 您可以使用
        forceFallback:true
        并在Sortable中定义onStart事件
      • 在这种情况下,使用
        Sortable.ghost
        (ghost元素)并检查其中是否有画布
      • 如果没有,那么图形就不存在。如果为空,您可以使用此处描述的方法之一检查它是否为空:

        • 我要感谢@OwenM的时间和帮助。 在存储库页面上与他进行了反复的交谈之后,他指出了正确的解决方案,并解决了我们最终面临的一些问题

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

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

          我要感谢@OwenM的时间和帮助。 在存储库页面上与他进行了反复的交谈之后,他指出了正确的解决方案,并解决了我们最终面临的一些问题

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

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

          这似乎是ChartJS的问题。甚至使用
          dataTransfer.setDragImage()
          将拖动图像设置到元素也不起作用。并使用Sortable的fallback
          forceFallback:true
          显示元素,但在图表应该显示的位置有一个空格。这可能是因为Sortable无法克隆画布中的内容,Chrome不允许将其作为拖动图像。感谢@OwenM,这听起来是对问题的一个很好的诊断,forceFallback甚至可能是我问题的临时解决方案。我想知道为什么Firefox和Edge能够克隆画布而Chrome不能?另外,正如我所提到的,MacOS上的Chrome成功地克隆了画布,但拖动的元素被移到了左侧。当Sortable无法克隆画布时,是否可能捕获错误?到目前为止,失败的尝试是沉默的。Cheers把它作为一个答案,因为它不适合评论。这似乎是ChartJS的一个问题。甚至使用
          dataTransfer.setDragImage()
          将拖动图像设置到元素也不起作用。并使用Sortable的fallback
          forceFallback: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上是如此,对于的平铺中的所有其他现有元素,性能相当差