jQuery和iframe以及奇怪的定位：是否有解决方法？ [英] jQuery and iframes and weird positioning: is there a workaround?
问题描述
我在iframe外面有一个可拖动的东西，里面有一个可放置的目标。在这里，我已经将iframe显示为包含由其src属性加载的HTML片段。
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>
我使用一些jQuery（UI draggable / droppable）来做东西：
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();
});
可拖动成为可拖动的，并且droppable成功成为下降目标。问题是丢弃区域的着陆区域不是它在屏幕上显示的位置。也就是说，当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.
我做过的一些测试表明它们之间存在差异目标在屏幕上的位置，jQuery认为它与页面上iframe的垂直位置有关，但我找不到直接关联。有没有人知道这个问题是否已被任何人调查过，并且已经解决了吗？
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?
如果不这样做，任何人都可以提出一种方法我可以加载外部HTML在没有使用iframe的情况下将文件存入我的页面，并且没有两个页面的结构和样式相互干扰？我正在考虑直接加载内页并使用javascript来绘制页面控件。
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
TIA Altreus
推荐答案
很久以前就问过了，但是挖掘了我发现了一个GIST，人们通过覆盖 $。ui的默认行为来解决这个问题。 ddmanager.prepareOffsets 。
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.
你可以在这里找到工作代码：
https://gist.github.com/gujiman/581a3cee1dbf4beafccb
You can find the working code here: https://gist.github.com/gujiman/581a3cee1dbf4beafccb
这篇关于jQuery和iframe以及奇怪的定位：是否有解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
