jQuery和iframes和怪异的定位：有没有解决方法？

我在iframe外面有一个可拖动的东西，里面还有一个可投掷的目标。在这里，我已经展示了iframe，其中包含由其src属性加载的HTML代码片段。jQuery和iframes和怪异的定位：有没有解决方法？

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

来源

2010-12-20 Altreus

我面临同样的问题！让我知道如果你成功 – Dharmesh 2013-03-10 07:31:55

找到这个寻找答案http://stackoverflow.com/questions/36368327/dropping-a-draggable-div-into-sortable-table-which-is-inside-the-iframe-and -on-d看起来像偏移量可能是关键，但没有看到通过下面的GIST更新滚动部分。 – Twisty 2016-04-07 19:20:00

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

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

来源

2010-12-20 18:38:57 PriorityMark

问题进入三年后，但为了以防万一，这似乎对我有用：'$（'＃draggables img'，window.top.document）' – 2013-12-05 02:57:13

有人问一个很久以前，但挖SO我发现了一个GIST，人们通过覆盖的$.ui.ddmanager.prepareOffsets默认行为，解决了这个问题。

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

来源

2015-05-20 19:31:26 Dorival

jQuery和iframes和怪异的定位：有没有解决方法？

回答

相关问题