Recentemente, tive alguns problemas usando os plugins JQuery Draggable e Resizable. Procurando soluções, encontrei um código muito fragmentado em muitos lugares diferentes e finalmente arquivei uma solução limpa que parece funcionar quase perfeitamente para mim.

Eu pensei em compartilhar minhas descobertas para qualquer outra pessoa, caso elas também se deparem com esse problema.

Eu tenho uma div que contém e IFrame. Essa div deve ser redimensionável e arrastável. Simples o suficiente - adicione o jquery arrastável e redimensionável à div da seguinte maneira:

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

Tudo está bem até você arrastar sobre outra div contendo um iframe ou tentar redimensionar sua div atual, movendo-se sobre seu iframe atual. Ambas as funções param quando um iframe está sobre.

Solução:

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

Desfrutar!

PS: Algum código extra para criar janelas que, quando selecionadas, são trazidas para a frente dos outros draggables:

Na função arrastável de início -

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