sortable - JQuery Draggable y Resizeable sobre IFrames(Solución)

resize div javascript

Question

Recientemente me encontré con algunos problemas con 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é que compartiría 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. Lo suficientemente simple: agregue el jquery que se puede arrastrar y el tamaño al div como lo hace:

$("#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, pasando sobre su iframe 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();
}
});

¡Disfrutar!

PD: código adicional para crear ventanas que, cuando se seleccionan, se ponen al frente de las otras arrastrables:

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

Answer 1

¿Por qué tan dificil? Hay una solución mucho más hermosa:

• pon tu iframe dentro de div relativa con algún índice z, digamos 0
• make iframe relative also y cambie su índice z a -1 durante el arrastre:

código:

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

Answer 2

Hay varias maneras de lograr esto, todo depende de sus 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.

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

El traer al frente también se puede mejorar en los puntos y puede no funcionar en todas las situaciones.

Answer 3

Lo que he hecho es definir body.dragging iframe {pointer-events: none;} luego agregar dragging class to body en el evento dragstart y eliminarlo en dragend event.

Funciona bien para mí, no estoy seguro de por qué no se mencionó antes, por lo que puedo decir, los eventos de puntero de propiedad de CSS ya existían en 2010.

Answer 4

Primero también fui como la solución de Byron Cobb, pero como estoy usando un elemento de diálogo y el iframe no es necesario cuando se muestra el diálogo (es un diálogo de guardado), me gustó usar la opción modal :

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

Answer 5

Prueba esto:

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

Esto debería funcionar.