可拖动的jQuery -拖动包含iframe和svg的div

Question

我正在尝试拖动一个包含gauge小部件的div，该小部件是用谷歌可视化JavaScript库创建的。该库在一个位于表中的iframe中创建一个svg。

我有一个div，它包装了整个东西，我希望能够拖动它。问题是，iframe似乎捕捉到了鼠标点击，它们永远不会冒泡到div，因此不会触发拖动。有人知道如何手动触发draggable事件吗？我试着用“mousedown”来触发它，但是不起作用。

还有别的人有这个问题吗？

谢谢。

Answer 1

脑海中浮现出几件事：

1)如果您的div崩溃(使用firebug查看计算的高度/宽度)(浮动元素有时会发生这种情况)，那么您的“可拖动区域”实际上可能不存在。即使父元素折叠，子元素也可以显示出来。尝试为父容器设置显式高度/宽度。

2)也许是因为你使用了特殊的子元素。在这种情况下，一个可能的变通办法是:创建子div，其高度/宽度与父div相同，并将其位置设置为绝对，然后创建一个大的z索引将其放在顶部。这基本上将一个“层”放在整个容器的顶部。我不确定如何使用.draggable()函数将新的顶级层用作可拖动区域，因为您可能还希望拖动整个父层。如果您将.draggable()添加到这个新层，它将只拖动该层。

一个简单的解决方案:为该窗口创建一个“标题栏”，并将CSS cursor属性设置为该可移动图标(不确定语法)。然后你的用户就会知道要抓起标题栏来拖拽它。

不确定这是否有帮助。