Recientemente encontré algunos problemas usando los plugins JQuery Draggable y Resizable. Buscando soluciones, encontré un código muy fragmentado en muchos lugares diferentes y finalmente me limité a una solución limpia que parece funcionar casi a la perfección para mí.JQuery Arrasable y Resizeable sobre IFrames (Solución)
Pensé en compartir mis hallazgos para cualquier otra persona, si se cruzan con este tema también.
Tengo un div que contiene y IFrame. Este div debe ser redimensionable y arrastrable. Bastante simple - añadir el jQuery que pueden arrastrarse y de tamaño variable a la div de este modo:
$("#Div").draggable();
$("#Div").resizable();
Todo va bien hasta que se arrastra sobre otro div que contiene un iframe o intenta cambiar el tamaño de su div actual, moviendo por encima de su marco flotante actual. Ambas funciones se detienen cuando pasa 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();
}
});
Enjoy!
PS: Algunos código adicional para crear ventanas que, cuando se selecciona, se señalan a la parte delantera de los demás draggables:
En la función de arranque se puede arrastrar -
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);
¿Tiene una jsfiddler de este o algo así, por lo puedo verlo en contexto? No estoy seguro de cómo tienes tu configuración html, por lo que tus selectores no tienen ningún sentido para mí. Gracias – bladefist
Heh. Tan simple y sin embargo funciona tan bien –
También los diálogos de IU de JQuery son una forma muy simple de obtener iframe flotante en la página :) – daitangio