私は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"> </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内から親要素にアクセスしようとしている
を、私は同じ問題に直面しています!あなたが成功すれば私に知らせてください。 – Dharmesh
これはhttp://stackoverflow.com/questions/36368327/dropping-a-draggable-div-into-sortable-table-which-is-inside-the-iframe-andへの回答を検索しました-on-d OffsetがGISTを介してスクロール部分へのアップデートを見たことがないようです。 – Twisty