How to put a Google Visualization in <div> and make it draggable with jQuery

I have a problem where divs become undraggable when populated by Google Visualization objects. It is almost as if the visualization is blocking the mouse from dragging the content. I realize I could add a handle outside the div, but I need the div look clean and simple(no handles or extra stuff).

Here is an example: http://jsbin.com/awoma4/5/edit

I need the visualization to fill the entire div and also be able to drag it开发者_JAVA技巧 around by clicking on it wherever, but now I'm at a loss. Any ideas? If this is not possible, perhaps there is a way to have a handle appear only on mouseover, and disappear otherwise?

---

I found a workaround, I did the following:

1. changed the target of the visualization to a child div that has a position of absolute
2. added a second child div that has height and width = 100% and is also absolute

This way the second child will "cover" the first (but it's essentially invisible because it is empty) and allow the drag and drop to work(as it will inherit the drag and drop from the parent). Anyone have any thoughts or better ideas? It isn't perfect because it prevents any mouse functions of the Google Visualization, but it still looks good.

---

Remove the script tag with the draggable. Immediately after your chart.draw invocation, add this code:

google.visualization.events.addListener(chart, 'ready', $( ".draggable" ).draggable({ grid: [ 40, 40 ], containment: "#playfield", scroll:false}));

What you're doing is making sure that the Google Chart/Visualization API is completely done before letting jQuery handle the draggable part.

I made these changes to your jsbin.

Update/Edit: Whoops, that's what I get for only seeing what happens in Chrome (which does produce the desired behavior, but the dragging is somewhat flaky.). Internet Explorer doesn't render the chart, and Firefox seems to go into an infinite loop. sigh Oh well, maybe someone else will have a good answer. I still think that adding a listener for the chart ready event is the way to the eventual soution; I'm just not familiar enough with the APIs (plus adding jQuery UIs draggable) to make it work.