JQuery Draggable и Resizeable через IFrames (решение)

Недавно я столкнулся с некоторыми проблемами при использовании плагинов JQuery Draggable и Resizable. В поисках решений я нашел очень фрагментированный код во многих разных местах и, наконец, перешел к чистому решению, которое, кажется, работает почти идеально для меня.

Я подумал, что поделюсь своими результатами для всех, если они встретятся эта проблема тоже.

У меня есть div, который содержит и IFrame. Этот div должен быть изменяемого размера и перетаскиваемым. Достаточно просто - добавьте jquery, перетаскиваемый и изменяемый, в div следующим образом:

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

Все в порядке, пока вы не перетащите курсор на другой элемент div, содержащий iframe, или не попытаетесь изменить размер текущего элемента div, перемещаясь по текущему элементу iframe. Обе функции останавливаются при переходе через iframe.

Решение:

$("#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();
    }
});

Наслаждайтесь!

PS: некоторый дополнительный код для создания окон, которые при выборе выводятся на передний план других перетаскиваемых объектов:

В перетаскиваемом элементе функция запуска -

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