Recientemente me encontré con algunos problemas al usar los complementos JQuery Draggable y Resizable. Buscando soluciones, encontré un código muy fragmentado en muchos lugares diferentes y finalmente archivé una solución limpia que parece funcionar casi perfectamente para mí.

Pensé que compartiría mis hallazgos con cualquier otra persona, en caso de que también encuentren este problema.

Tengo un div que contiene e IFrame. Este div debe ser redimensionable y arrastrable. Suficientemente simple: agregue el jquery arrastrable y redimensionable al div de la siguiente manera:

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

Todo está bien hasta que arrastre sobre otro div que contenga un iframe o intente cambiar el tamaño de su div actual, moviéndose sobre su iframe actual. Ambas funciones se detienen cuando se pasa por encima de un iframe.

Solución:

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

¡Disfrutar!

PD: Algunos códigos adicionales para crear ventanas que, cuando se seleccionan, se colocan al frente de los otros draggables:

En la función de inicio arrastrable:

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