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和怪異的定位：有沒有解決方法？

回答

相關問題