CODEWITHSUNDEEP
jquerydraggable
Yaron
Yaron

Reputation: 43

jQuery draggable - Dragging a div that contains an iframe and svg

I am trying to drag a div that contains a gauge widget created with the google visualization JavaScript library. The library creates an svg inside an iframe that sits inside a table.

I have a div that wraps the whole thing and I want to be able to drag it. The problem is that it seems that the iframe is capturing the mouse clicks and they never bubble to the div and hence the dragging is not triggered. Does anyone know how can I trigger the draggable event manually? I tried triggering it with a 'mousedown' but that doesn't work.

Anyone else had this problem?

Thank you.

Upvotes: 0

Views: 479

Answers (1)

Michael Lewis
Michael Lewis

Reputation: 4302

A few things come to mind:

1) If your div collapses (use firebug to see the computed height/width) which sometimes happens with floated elements, then your "draggable region" might in fact not exist. The child elements can show up even if the parent collapses. Try setting an explicit height/width to the parent container.

2) Maybe its because of the special child element your using. In this case, a potential work around: Create a child div, with the same height/width of the parent, and set its positioning to absolute, and create a large z-index to put it on top. This basically puts a "layer" on top of the whole container. I'm not sure how you'd use the .draggable() function to use that new top-level layer as the draggable region, because you'd want to drag the entire parent around as well. If you added .draggable() to this new layer, it would just drag that layer alone.

A simple solution: Create a "title bar" for that window, and set the CSS cursor property to that moveable icon (not sure the syntax). Then your user knows to grab the title bar to drag it around.

Not sure if that helps...

Upvotes: 0

Related Questions