5

我在 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奥特柔斯

4

2 回答 2

0

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

$('#draggables img', parent).draggable();
于 2010-12-20T18:38:57.857 回答
0

很久以前就有人问过，但是挖掘所以我发现了一个 GIST，人们通过覆盖$.ui.ddmanager.prepareOffsets.

你可以在这里找到工作代码： https ://gist.github.com/gujiman/581a3cee1dbf4beafccb

于 2015-05-20T19:31:26.947 回答