5

iframe の外にドラッグ可能なものと、その中にドロップ可能なターゲットがあります。ここでは、src 属性によって読み込まれる HTML のスニペットを含む 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();
});

ドラッグ可能なものはドラッグ可能になり、ドロップ可能なものは正常にドロップ ターゲットになります。問題は、ドロップ エリアのランディング ゾーンが画面に表示される場所ではないことです。つまり、ドラッグ可能オブジェクトがターゲット自体ではなく、ドロップ ターゲットの上のどこかにドロップされたときにアラートが発生します。

私が行ったいくつかのテストでは、ターゲットが画面上にある場所と jQuery が認識している場所の違いは、ページ上の iframe の垂直位置に関連していることが示唆されましたが、直接的な相関関係は見つかりませんでした。この問題が誰かによって調査され、おそらく解決されたかどうかを知っている人はいますか?

それができない場合、iframe を使用せずに、また 2 つのページの構造とスタイルが互いに干渉することなく、外部 HTML ファイルを自分のページにロードできる方法を誰かが提案できますか? 内部ページを直接ロードし、javascript を使用してその周りにページ コントロールを描画することを検討しています。

TIA アルトレウス

4

2 に答える 2

0

ずいぶん前に質問されましたが、掘り下げていくと、 のデフォルトの動作を上書きすることでこの問題を解決する GIST が見つかりました$.ui.ddmanager.prepareOffsets。

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

于 2015-05-20T19:31:26.947 に答える
0

子 iframe 内から親要素にアクセスしようとしています。個人的にはテストしていませんが、jquery セレクターのコンテキストを設定してみてください。それ以外の場合は、現在の iFrame 内のみが表示されます。

$('#draggables img', parent).draggable();
于 2010-12-20T18:38:57.857 に答える