jQuery Controlador arrastrable dentro de IFrame

¡Qué bobo!jQuery Controlador arrastrable dentro de IFrame

Básicamente tengo un padre <div> y dentro de eso un . Necesito un elemento dentro del iframe para ser el controlador para arrastrar el div principal. ¿Esto es posible?

que he intentado:

$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')); 
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')[0]);

que está proyectando el DOM elemento de la derecha, pero simplemente no va a arrastrar. Podría ser posible superponer un div oculto en la cima del iframe, pero he encontrado que el iframe toma el evento sobre el div cuando la posición es absoluta. Extraño.

Fuente

2010-08-06 Louis

Arrastrable con iFrameFix todavía era lento para mí. El diálogo funcionó mejor, si un diálogo es una solución aceptable. Todavía es arrastrable pero también se puede cerrar. – user420667

Decidí probar esto y chico, es mucho trabajo con poco progreso usando un nodo de iframe interno como asa. De todos modos, aquí hay dos soluciones, la primera no funciona muy bien, pero si puede hacer que funcione, puede ser más conveniente.

principal.html (plagio de la demo)

<div id="draggable" class="ui-widget-content" style="position:relative;"> 
    <p class="ui-widget-header">I can be dragged only by this handle</p> 
    <iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe> 
</div>

interior handle.html

<html> 
    <head> 
     <script type="text/javascript" src="../../jquery-1.4.2.js"></script> 
    </head> 
    <body> 
     <div id="innerHandle">handle</div> 
    </body> 
</html>

JavaScript

$(function() { 
    var moveEvent; 
    $(document).mousemove(function (e) { 
     moveEvent = e; 
    }); 

    $("#draggable").draggable(); 
    $('iframe', '#draggable').load(function() { 
     $('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) { 
      $('#draggable').draggable().data('draggable')._mouseDown(moveEvent); 
      return false; 
     }); 
    }); 
});

Me tomó un tiempo para encontrar algo que " trabajó." El problema aquí es que, dado que el evento mousedown se produjo en un elemento dentro del iframe, el evento del mouse es relativo al iframe, no al documento principal. La solución alternativa es tener un evento de movimiento en el documento y tomar la posición del mouse desde allí. El problema, una vez más, es que si el mouse está dentro del iframe, "no" se mueve de acuerdo con el documento principal. Esto significa que el evento de arrastre solo ocurre cuando el mouse alcanza el borde del iframe en el documento principal.

Una solución para esto podría ser generar eventos manualmente con la posición calculada del iframe en relación con el movimiento del mouse. Entonces, cuando su mouse se mueve dentro del iframe, calcule su movimiento usando la coordenada del iframe al documento principal. Esto significa que es necesario utilizar el evento desde el mousedown y no mousemove,

$('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) { 
    // do something with e 
    $('#draggable').draggable().data('draggable')._mouseDown(e); 
    return false; 
});

La segunda solución es la forma en que usted ha mencionado, tiene un div posicionado absoluto sobre el propio marco flotante.No tengo problemas en conseguir el div a estar en la cima del marco flotante, es decir,

<div id="draggable" class="ui-widget-content" style="position:relative;"> 
    <p class="ui-widget-header">I can be dragged only by this handle</p> 
    <iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe> 
    <div style="position: absolute; height: 30px; width: 30px; background-color: black; z-index: 1000;"></div> 
</div>

El problema con el div estar detrás del marco flotante podría ser debido a que el índice z está apagado. Si declara su div antes del iframe y no especifica el índice z, entonces el iframe estará en la parte superior.

¡De cualquier forma que elija, buena suerte!

Fuente

2010-08-12 23:35:18

Woah gracias por su arduo trabajo. Creo que probaré la segunda solución. El primero sería demasiado problemático, creo. ¡Muchas gracias! – Louis

lo que sucede cuando se hace esto (con firebug activada):

var frameContent = $('iframe',node).contents() 
var handle = frameContent.find('#handle'); 
console.debug(frameContent, handle)

¿Se handle contienen una lista de los elementos? Y si es así, observe cuidadosamente el objeto Document que es frameContent - ¿es la URL "about:blank"? Es sólo una corazonada, pero si obtiene estas salidas, probablemente esté ejecutando el selector jQuery antes de que el contenido del marco haya cargado (es decir, antes de que el elemento #handle exista).

En cuyo caso, puede agregar un evento al documento IFRAME y comunicarse con el marco principal a través del window.parent.

Fuente

2010-08-09 18:41:35 Adam

No se puede probar ahora, así que lo intentaré pronto, pero estoy cambiando la opción de window.onload en el iframe, así que supongo que está listo. Cuando registro el contenido de lo que se encuentra, es el elemento DOM correcto. Tal vez simplemente no es posible. – Louis

probar este

$ ('# DIV') que pueden arrastrarse ({iframeFix: true}).;

esto debería funcionar

Fuente

2010-11-17 09:31:36 vishal

Genius! Muchas gracias! – mateuscb

jQuery Controlador arrastrable dentro de IFrame

Respuesta

Cuestiones relacionadas