如何在 <div> 中放置 Google 可视化并使用 jQuery 使其可拖动答案

【问题标题】：How to put a Google Visualization in <div> and make it draggable with jQuery如何在 <div> 中放置 Google 可视化并使用 jQuery 使其可拖动
【发布时间】：2011-02-08 18:23:58
【问题描述】：

我遇到了一个问题，即当由 Google 可视化对象填充时，div 变得不可拖动。就好像可视化阻止了鼠标拖动内容。我意识到我可以在 div 之外添加一个句柄，但我需要 div 看起来干净简单（没有句柄或额外的东西）。

这里是一个例子：http://jsbin.com/awoma4/5/edit

我需要可视化来填充整个 div，并且还可以通过在任何地方单击它来拖动它，但现在我不知所措。有任何想法吗？如果这是不可能的，也许有一种方法可以让句柄只在鼠标悬停时出现，否则消失？

【问题讨论】：

标签： javascript jquery jquery-ui draggable

【解决方案1】：

我找到了解决方法，我做了以下操作：

将可视化的目标更改为具有绝对位置的子 div
添加了第二个子 div，其高度和宽度 = 100%，也是绝对的

这样第二个孩子将“覆盖”第一个孩子（但它本质上是不可见的，因为它是空的）并允许拖放工作（因为它将继承父级的拖放）。任何人有任何想法或更好的想法？它并不完美，因为它会阻止 Google 可视化的任何鼠标功能，但它看起来仍然不错。

【讨论】：

【解决方案2】：

删除带有可拖动的脚本标签。在您调用 chart.draw 之后，立即添加以下代码：

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

您要做的是确保在让 jQuery 处理可拖动部分之前完全完成 Google Chart/Visualization API。

我对您的jsbin 进行了这些更改。

更新/编辑：哎呀，这就是我只看到 Chrome 中发生的事情所得到的（这确实产生了所需的行为，但拖动有点不稳定。）。 Internet Explorer 不呈现图表，Firefox 似乎进入了无限循环。 sigh 哦，好吧，也许其他人会有一个很好的答案。我仍然认为为图表就绪事件添加一个侦听器是最终解决方案的方法；我只是对 API 不够熟悉（加上添加可拖动的 jQuery UI）来使其工作。

【讨论】：

至少感谢您的尝试！