0

親ページに iframe をロードしました。ページと iframe は異なるドメインでホストされています。私の iframe スケルトンは次のようになります: http://cl.ly/image/44090J0H2S3Y

外部から iframe へのファイルのドラッグ アンド ドロップを実装しようとしています。セキュリティ上の理由により、ブラウザはドラッグ アンド ドロップ イベントを別のドメインからロードされた iframe に転送しません。現在、iframe全体に透明なdivを配置し、javascriptの「ドロップ」イベントを透明なdivにキャッチしてから、iframe.postMessageを使用してメッセージをiframeに送信することで、これを回避しています。iframe 側では、メッセージをリッスンする JavaScript がいくつかあり、サーバーにアップロードする適切なアクションを実行します。

これはすべて正常に機能しています。私が実装したいのは次のとおりです。

  1. ユーザーがホスト ページから画像のドラッグを開始する
  2. 「青い」エリアに到着するとすぐに、対応する青いアイテムが強調表示されます。
  3. 彼女が手放すと、ファイルがアップロードされます

青いアイテムのそれぞれに個別の透明な div を配置できますが、問題は、スクロールバーなどで青いアイテムがいくつでもある可能性があることです。これをどのように達成できるかわかりません。ご協力いただきありがとうございます！

4

2 に答える 2

0

次のような方法で透明な div を作成します。

var blueItemContainer = document.getElementById('blueItemContainer');
var blueItems = blueItemContainer.childNodes;

blueItemContainer.style.position = "relative";

for(var i = 0; i < blueItems.length; i++)
{
    var transparentDiv = document.createElement('div');
    transparentDiv.style.height = blueItems[i].style.height;
    transparentDiv.style.width = blueItems[i].style.width;
    transparentDiv.style.position = "absolute";
    transparentDiv.style.left = blueItems[i].offsetLeft;
    transparentDiv.style.top = blueItems[i].offsetTop;
    blueItemContainer.appendChild(transparentDiv);
}
于 2013-08-21T20:22:01.257 に答える