Floating clone does not show in chrome if dragged element contains a chartjs component

Codesand box link

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

Step by step scenario

I am building a dashboard where each draggable tile of a grid contains a graph. The graphs are drawn using chart.js. Although I am able to change the order of the tiles by dragging and dropping, the floating reference tile of the tile being dragged does not show up if the tile contains a chart.js graph. This only occurs in Chrome Browser. For Firefox and Edge browsers it works fine.

Actual Solution

The only found solution is to hide the chart before dragging.

Expected Solution

It would be amazing if I can avoid hiding the charts while dragging the tiles.

The results for firefox and chrome are shown below. The flashing glitches is some bug from the screen recording tool, disregard that.

Result in Firefox67 (Arch Linux) firefox-vuedraggable-opt

Result in Chrome74 (Arch Linux) Incognito window without any extension chome-vuedraggable-opt

Visual results for different browsers from example available at CodeSandbox.

Both results were achieved using Chrome74 and Firefox67 running on Arch Linux. I had the same results for Chrome in Windows, but can't confirm the version now.

I also tried Chrome75 for MacOS. The floating tile was shown, however it was dislocated outside of the page frame when charts were enabled.

1 answer

  • answered 2019-06-25 22:51 Owen M

    All I can think of is this:

    • You use forceFallback: true and define a onStart event in Sortable
    • In that event, you use Sortable.ghost (the ghost element) and check if it has a canvas inside it
    • If it does not, then the graph is not there. If it does, you can check if it is empty by using one of the methods described here: How to check if a canvas is blank?