jQuery和iframe以及奇怪的定位：是否有解决方法？

我在iframe外面有一个可拖动的东西,里面有一个可放置的目标.在这里,我已经将iframe显示为包含由其src属性加载的HTML片段.

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

我使用一些jQuery(UI draggable / droppable)来做东西：

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

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

拖拽者变得可拖动,并且拖曳成功成为下降目标.问题是丢弃区域的着陆区域不是它在屏幕上显示的位置.也就是说,当draggable被丢弃在放置目标上方某处而不是目标本身时,会触发警报.

我做过的一些测试表明目标在屏幕上的位置与jQuery认为的位置之间的差异与页面上iframe的垂直位置有关,但我找不到直接关联.有谁知道这个问题是否已被任何人调查过,并且已经解决了？

如果做不到这一点,任何人都可以提出一种方法,我可以在不使用iframe的情况下将外部HTML文件加载到我的页面中,而且两个页面的结构和样式不会相互干扰吗？我正在考虑直接加载内页并使用javascript来绘制页面控件.

TIA
Altreus

解决方法

您正尝试从子iframe中访问父元素.我没有亲自测试过它,但是尝试为你的jquery选择器设置上下文.否则,它只会在当前的iFrame中查找.

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