JQuery Draggable and Resizeable over IFrames (Solution)

Question

I recently ran into some troubles using JQuery Draggable and Resizable plugins. Looking for solutions, i found some very fragmented code in many different places and finally filed down to a clean solution which seems to work almost perfectly for me.

I thought i'd share my findings for anyone else, should they come accross this issue too.

I have a div which contains and IFrame. This div must be resizeable and draggable. Simple enough - add the jquery draggable and resizable to the div like so:

$("#Div").draggable();
$("#Div").resizable();

All is fine until you drag over another div containing an iframe or try to resize your current div, by moving over your current iframe. Both functions stop when over an iframe.

Solution:

$("#Div").draggable({
    start: function () {
        $(".AllContainerDivs").each(function (index, element) {
        var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
        $(element).append(d);});
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});



$("#Div").resizable({
    start: function () {
        $(".AllContainerDivs").each(function (index, element) {
            var d = $('<div class="iframeCover" style="z-index:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
            $(element).append(d);
        });
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});

Enjoy!

PS: Some extra code to create windows which, when selected, are brought to the front of the other draggables:

In the draggable start function -

var maxZ = 1;
$(".AllContainerDivs").each(function (index, element) {
    if ($(element).css("z-index") > maxZ) {
        maxZ = $(element).css("z-index");
    }
});
$(this).css("z-index", maxZ + 1);

Endostosis

Also JQuery UI dialogs are a very simple way to get floating iframe on the page:) – If

Do you have a jsfiddler of this or something, so i can see it in context? I'm not sure how you have your html setup, so your selectors don't make any sense to me. Thanks – Backsaw

Heh. So simple and yet works so well – Vincennes

Answer 1

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.

Endostosis

This worked perfectly for me, a simple call to $('iframe').toggle() on start and stop (see the other answers for examples on setting those callbacks) is all that's needed. – Kowloon

Answer 2

Try this:

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

This should work.

Metonym

This was the first thing I tried and it fails under multiple conditions, I'm not sure why, because essentially its the same thing I've implemented. – Endostosis

Actually it disabled links within the draggable element for some reason, ended up doing this instead: https://mcmap.net/q/660542/-jquery-draggable-iframefix – Banas

try to understand my feeling when i struggled with this bug for an hour and finally i found this solution, iframeFix: true - how obvious. saved my day. thanks! – Nominalism

Answer 3

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.

Furtado

Answer 4

I first also went like Byron Cobb's solution, but as I'm using a dialog element and the Iframe isn't needed when the dialog is shown (it's a saving dialog), I liked using the modal option:

$('#savingDialog').dialog({
    modal: true
});

Williamson

Answer 5

Why so hard? There is much more beautiful solution:

• put your iframe inside relative div with some z-index, say 0
• make iframe relative also and change it's z-index to -1 during dragging:

code:

$("#Div").draggable({
    start: function () {
        $("iframe").css('z-index', '-1');
    },
    stop: function () {
        $("iframe").css('z-index', '0');
    }
});

Baulk

Answer 6

All great answers, but none were easily implemented for me!

I was helped, but in the end, I used:

Inside the Iframe Header <script> tag:

var iframes = window.parent.$('iframe');
iframes.each(function () {
    if ($(this).attr('src') == '<YOUR SOURCE PATH>')
    $(this).css('z-index', '-1');
});

This is to fix a TinyMCE IFrame Draggable issue. on applying this code inside the iframe, the Non-Draggable problem. Also, check the order of the *.js files, it makes a difference!

Regardless