JQuery Draggable and Resizeable over IFrames (Solution)

Question

Hi Everyone!

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);

Answer 1

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

Answer 2

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.

Regards, Byron Cobb.