2010-12-20 18 views
5

私はiframeの外にドラッグ可能なものを持っていて、その中にドロップ可能なターゲットがあります。ここでは、src属性で読み込まれたHTMLのスニペットを含むiframeを示しました。jQueryとiframeと奇妙な配置:回避策はありますか?

<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(); 
}); 

はdraggablesはドラッグ可能になり、ドロップ可能に成功ドロップターゲットです。問題は、ドロップ領域のランディングゾーンが画面上に表示される場所ではないことです。つまり、アラートは、ドラッグ対象がドロップターゲットの上のどこかにドロップされたときに起動され、ターゲット自体にはドロップされません。

ターゲットが画面上にある場所とjQueryが考えている場所の違いは、ページ上のiframeの垂直位置に関係していますが、直接の相関関係は見つかりませんでした。誰もがこの問題が誰でもどこで調査されているのか、それとも解決したのか、誰にも分かっていますか?

誰も私のページにiframeを使わずに外部HTMLファイルを読み込み、2つのページの構造とスタイルが互いに干渉しないようにする方法を提案できますか?私は内部のページを直接ロードし、その周りにページコントロールを描画するためにjavascriptを使用することを検討しています。あなたは子供はiframe内から親要素にアクセスしようとしている

+0

を、私は同じ問題に直面しています!あなたが成功すれば私に知らせてください。 – Dharmesh

+0

これはhttp://stackoverflow.com/questions/36368327/dropping-a-draggable-div-into-sortable-table-which-is-inside-the-if​​rame-andへの回答を検索しました-on-d OffsetがGISTを介してスクロール部分へのアップデートを見たことがないようです。 – Twisty

答えて

0

TIA Altreus。私はそれを個人的にテストしていませんが、jqueryセレクタのコンテキストを設定しようとします。それ以外の場合は、現在のiFrame内のみが表示されます。

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

3年後の質問ですが、ちょうどその場合、これは私にとってはうまくいくようです: '$( '#draggables img'、window.top.document)' –

0

それはずっと前に尋ねたが、私は人々が$.ui.ddmanager.prepareOffsetsのデフォルトの動作を上書きすることで、この問題を解決したGISTを発見したSO掘りました。

現在作業コードを見つけることができます。 https://gist.github.com/gujiman/581a3cee1dbf4beafccb

関連する問題