JQuery Arrasable y Resizeable sobre IFrames (Solución)

Question

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í.

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

Answer 1

Hay un número de maneras para lograr esto, todo depende de tus necesidades. Encontré que al redimensionar/arrastrar muchas ventanas se ralentiza mucho la IU, y como tal, terminé ocultando los iframes al comienzo del cambio de tamaño/Arrastrando con un borde para ayudar a la navegación.

Existen algunos complementos de jquery que logran parte de esta funcionalidad, pero muchos tienen dificultades con los iframes.

El bring to front también se puede mejorar en los puntos y es posible que no funcione en todas las situaciones.

Answer 2

Prueba esto:

$('#Div').draggable({ iframeFix: true }); 

Esto debería funcionar.

Answer 3

La primera vez que entró también como solución de Byron Cobb, pero como yo estoy usando un elemento de diálogo y el marco flotante no es necesario cuando se muestra el cuadro de diálogo (que es un diálogo de guardar), me ha gustado usar la opción modal:

$('#savingDialog').dialog({ 
    modal: true 
}); 

Answer 4

¿Por qué es tan difícil? Hay mucho más bella solución:

• poner su marco flotante dentro div relación con algún índice z, dicen 0
• maquillaje iframe relativa también y cambiar su índice z en -1 durante el arrastre:

código:

$("#Div").draggable({ 
    start: function() { 
     $("iframe").css('z-index', '-1'); 
    }, 
    stop: function() { 
     $("iframe").css('z-index', '0'); 
    } 
}); 

Answer 5

lo que he hecho es definir body.dragging iframe {pointer-events: none;} luego añadir dragging clase de cuerpo sobre dragstart evento y quitarlo en caso dragend.

funciona bien para mí, no sé por qué no se mencionó antes, por lo que yo puedo decir puntero-acontecimientos propiedad CSS ya estaba en torno a 2010.