如何将 Google 可视化结果放入
中并使用 jQuery 使其可拖动

发布于 2024-10-17 01:02:54 字数 324 浏览 1 评论 0原文

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

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

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

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 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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

左岸枫 2024-10-24 01:02:54

我找到了一个解决方法,我执行了以下操作:

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

这样第二个子将“覆盖”第一个(但它本质上是不可见的,因为它是空的)并允许拖放工作(因为它将继承父级的拖放功能)。
有人有什么想法或更好的想法吗?它并不完美,因为它阻止了 Google Visualization 的任何鼠标功能,但它看起来仍然不错。

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.

审判长 2024-10-24 01:02:54

使用可拖动删除脚本标签。在您的 Chart.draw 调用之后,立即添加以下代码:

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

您所做的是确保 Google Chart/Visualization API 完全完成,然后再让 jQuery 处理可拖动部分。

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

更新/编辑:哎呀,这就是我只看到 Chrome 中发生的情况所得到的结果(它确实产生了所需的行为,但拖动有点不稳定。)。 Internet Explorer 不渲染图表,Firefox 似乎进入无限循环。 叹气哦,好吧,也许其他人会有一个很好的答案。我仍然认为为图表就绪事件添加监听器是最终解决方案;我只是对 API 不够熟悉(加上添加可拖动的 jQuery UI)以使其工作。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文