jQuery e iframes y posicionamiento extraño: ¿hay alguna solución?

Tengo algo que se puede arrastrar fuera de un iframe y un objetivo que se puede colocar dentro. Aquí he mostrado que el iframe contiene un fragmento del HTML cargado por su atributo src.jQuery e iframes y posicionamiento extraño: ¿hay alguna solución?

<div id="draggables"> 
    <img src="drag-me.gif"> 
</div> 

<iframe src="iframe-src.html" id="iframe"> 
    <!-- HTML gubbins --> 

    <div id="droppable">&nbsp;</div> 

    <!-- More HTML gubbins --> 
</iframe>

Consumo jQuery (interfaz de usuario que pueden arrastrarse/lanzables) para hacer cosas:

$("#iframe").load(function() { 
    var $this = $(this); 
    var contents = $this.contents(); 

    contents.find('#droppable').droppable({ 
     drop: function (event, ui) { alert('dropped'); } 
    }); 
    $('#draggables img').draggable(); 
});

Los draggables convierten arrastrable y el éxito lanzables es un destino de colocación. El problema es que la zona de aterrizaje para el área de caída no está donde se muestra en la pantalla. Es decir, la alerta se activa cuando el elemento arrastrable se coloca en algún lugar sobre el objetivo de colocación, y no en el objetivo mismo.

Algunas pruebas que hice sugieren que la diferencia entre dónde está el objetivo en la pantalla y dónde jQuery cree que está está relacionada con la posición vertical del iframe en la página, pero no puedo encontrar una correlación directa. ¿Alguien sabe si este problema ha sido investigado por alguien en alguna parte y, quizás, resuelto?

En su defecto, ¿alguien puede sugerir una forma en que pueda cargar un archivo HTML externo en mi página sin usar un iframe y sin que las estructuras y estilos de las dos páginas interfieran entre sí? Estoy considerando cargar la página interna directamente y usar javascript para dibujar controles de página a su alrededor.

TIA Altreus

Fuente

2010-12-20 Altreus

estoy enfrentando el mismo problema !! Avísame si tienes éxito – Dharmesh

Encontré esta búsqueda para la respuesta a http://stackoverflow.com/questions/36368327/dropping-a-draggable-div-into-sortable-table-which-iside-the-iframe-and -on-d Parece que el Offset podría ser la clave pero aún no se ha visto una actualización de la porción de desplazamiento a través de GIST a continuación. – Twisty

Usted está tratando de acceder al elemento padre dentro del marco flotante niño. No lo he probado personalmente, pero trato de establecer el contexto para su selector de jquery. De lo contrario, se verá solo dentro del iFrame actual.

$('#draggables img', parent).draggable();

Fuente

2010-12-20 18:38:57 PriorityMark

Pregunta dentro de tres años, pero por las dudas, esto parece funcionar para mí: '$ ('# draggables img', window.top.document)' –

Se preguntó un tiempo atrás, pero excavación así que encontré un GIST donde las personas resuelven este problema al sobrescribir el comportamiento predeterminado de $.ui.ddmanager.prepareOffsets.

Puede encontrar el código de trabajo aquí: https://gist.github.com/gujiman/581a3cee1dbf4beafccb

Fuente

2015-05-20 19:31:26 Dorival

jQuery e iframes y posicionamiento extraño: ¿hay alguna solución?

Respuesta

Cuestiones relacionadas