jQuery 和 iframe 以及奇怪的定位 : is there a workaround?

Question

我在 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 可拖动/可放置)来做一些事情:

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

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

可拖动对象变为可拖动对象，并且可放置对象成功成为放置目标。问题在于放置区域的着陆区域不是屏幕上显示的位置。也就是说，当可拖动对象被放置在放置目标上方的某处(而不是放置在目标本身上)时，会触发警报。

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

如果做不到这一点，谁能建议一种方法，让我能够在不使用 iframe 的情况下将外部 HTML 文件加载到我的页面中，并且两个页面的结构和样式不会相互干扰？我正在考虑直接加载内部页面并使用 javascript 在其周围绘制页面控件。

TIA阿尔特鲁斯

Answer 1

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

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