JQuery Draggable and Resizeable over IFrames (Solution) JQuery Draggable and Resizeable over IFrames (Solution) jquery jquery

JQuery Draggable and Resizeable over IFrames (Solution)


Try this:

 $('#Div').draggable({ iframeFix: true });

This should work.


What I've done is define body.dragging iframe {pointer-events: none;} then add dragging class to body on dragstart event and remove it on dragend event.

Works fine for me, not sure why it wasn't mentioned before, as far as I can tell pointer-events CSS property was already around in 2010.


There are a number of ways to achieve this, all depending on your needs. I found resizing/dragging many windows slows the UI down a lot, and as such I ended up hiding the iframes on start of resize/Drag with a border to help navigation.

There are some jquery plugins that achieve part of this functionality, but many struggle with iframes.

The bring to front can also be improved at points and may not work in all situations.