如何将Google Visualization放入 <div> 并使其与jQuery可拖动

Question

我有一个问题，当由Google Visualization对象填充div时，它变得无法拖动。 这几乎就像可视化阻止鼠标拖动内容一样。 我意识到我可以在div外面添加一个句柄，但是我需要div看起来干净简洁（没有句柄或其他东西）。

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

我需要可视化来填充整个div，还可以通过在任何位置单击它来拖动它，但是现在我很茫然。 有任何想法吗？ 如果这不可能，也许有一种方法可以使句柄仅在鼠标悬停时出现，否则消失？

Answer 1

我找到了一种解决方法，我做了以下工作：

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

这样，第二个孩子将“覆盖”第一个孩子（但由于它是空的，因此基本上是不可见的）并允许拖放工作（因为它将继承父对象的拖放）。 有人有什么想法或更好的主意吗？ 它不是完美的，因为它阻止了Google Visualization的任何鼠标功能，但看起来仍然不错。

Answer 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似乎陷入了无限循环。 感叹哦，也许其他人会得到很好的回答。 我仍然认为为图表就绪事件添加一个侦听器是最终解决问题的方法。 我只是对API不够熟悉（加上添加可拖动的jQuery UI）以使其工作。