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"> </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 阿尔特鲁斯
I've got a draggable thing outside an iframe, and a droppable target inside it. Here I've shown the iframe as containing a snippet of the HTML that is loaded by its src attribute.
<div id="draggables">
<img src="drag-me.gif">
</div>
<iframe src="iframe-src.html" id="iframe">
<!-- HTML gubbins -->
<div id="droppable"> </div>
<!-- More HTML gubbins -->
</iframe>
I use some jQuery (UI draggable/droppable) to do 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 and the droppable is successfully a drop target. The problem is that the landing zone for the drop area is not where it is displayed on the screen. That is, the alert is fired when the draggable is dropped somewhere above the drop target, and not on the target itself.
A few tests I did suggest that the difference between where the target is on screen and where jQuery thinks it is is related to the vertical position of the iframe on the page, but I can't find a direct correlation. Does anyone know whether this problem has been investigated by anyone anywhere and, perchance, solved?
Failing that, can anyone suggest a way I may be able to load an external HTML file into my page without using an iframe and without the two pages' structures and styles interfering with one another? I'm considering loading the inner page directly and using javascript to draw page controls around it.
TIA
Altreus
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您正在尝试从子 iframe 中访问父元素。我没有亲自测试过它，但尝试为您的 jquery 选择器设置上下文。否则，它只会在当前 iFrame 内部查找。
You're trying to access the parent element from within the child iframe. I haven't personally tested it, but try to set context for your jquery selector. Otherwise, it'll look only inside the current iFrame.
很久以前就有人问过这个问题，但是我发现了一个 GIST，人们通过覆盖
$.ui.ddmanager.prepareOffsets的默认行为来解决这个问题。您可以在这里找到工作代码：
https://gist.github.com/gujiman/581a3cee1dbf4beafccb
It was asked a long ago, but digging SO I found a GIST where people solved this problem by overwriting the default behavior of
$.ui.ddmanager.prepareOffsets.You can find the working code here:
https://gist.github.com/gujiman/581a3cee1dbf4beafccb