Re: Can Google Charts be dragged/dropped using HTML5 ? As active chart object?

[asgallant]

I've never seen a drag-n-drop system that works with the charts.  Most of them clone the elements and recreate them in the new location.  Cloning doesn't preserve event handlers, though, so you'd have to find a drag-n-drop system that moves the element without cloning it (which I'm not entirely certain is even possible).

If you redraw the chart on completion of the drag-n-drop, though, all interactivity will be restored.

On Wednesday, January 2, 2013 2:57:29 PM UTC-5, Marat wrote:

I tried to experiment with a Google line chart embedded inside a div element. That div element was set as draggable and a target dropoff div was created. I added the necessary javascript code (event listener for dragstart, etc..). 

The result was that I was able to drag and drop the Line chart onto the target div.
The data transfer event was via event.dataTransfer.setData('text/html', event.target.innerHTML);

The problem is that it dragged/dropped chart is a copy image of the original line chart. The dropped chart doesn't support the active events.
For example the original line chart supports line highlighting (Google original example: https://developers.google.com/chart/interactive/docs/gallery/linechart ) and the dropped objects appears to be an image.

Is it possible to drag/drop data transfer the chart so it remains active as well?

[Marat]

Thanks for the response.

I am basically new to HTML5, but could you tell me how I could redraw the chart on the onDrop event? Or point me to an example that I could modify?

[asgallant]

How exactly you implement it is largely dependent on the drag-n-drop API.  The code for your charts must be in scope of the drag-n-drop code to make it work, and it should be as simple as making another call to your chart's draw function in whatever event handler your drag-n-drop API exposes for drops.