jQuery and iframes and weird positioning: is there a workaround? -

i've got draggable thing outside iframe, , droppable target inside it. here i've shown iframe containing snippet of html loaded src attribute.

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

i use jquery (ui draggable/droppable) stuff:

$("#iframe").load(function() {     var $this = $(this);     var contents = $this.contents();      contents.find('#droppable').droppable({         drop: function (event, ui) { alert('dropped'); }     });     $('#draggables img').draggable(); }); 

the draggables become draggable , droppable drop target. problem landing zone drop area not displayed on screen. is, alert fired when draggable dropped somewhere above drop target, , not on target itself.

a few tests did suggest difference between target on screen , jquery thinks is related vertical position of iframe on page, can't find direct correlation. know whether problem has been investigated anywhere and, perchance, solved?

failing that, can suggest way may able load external html file page without using iframe , without 2 pages' structures , styles interfering 1 another? i'm considering loading inner page directly , using javascript draw page controls around it.

tia altreus

you're trying access parent element within child iframe. haven't tested it, try set context jquery selector. otherwise, it'll inside current iframe.

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