現在のフレームとの相対的な終了ドラッグ位置はどのようにして取得できますか？

Question

は、私はドラッグに走ったとGoogle Chromeで問題をドロップ：

foo.htmlという：

<iframe style="position:absolute;left:300px" src="bar.html"></iframe> 

内容でbar.html：

<div draggable="true" id="bar">Drag me!</div> 
<script> 
    document.getElementById("bar").addEventListener("dragend", function(e) { 
     console.log(e.view === window); // false 
     console.log(e.view === window.parent); // true 
    }); 
</script> 

がなぜにe相対的なものです（現在のフレームのwindowのプロパティ）ではなく、親ウィンドウを使用していますか？私は、dragstartとdragoverの両方が、現在のフレームに対してプロパティーをviewで受け取っていることを確認しました。

Hereサファリまたはクロムの問題を再現したものです。

編集：私のテストでは、私はフレームの外にドラッグを終了しません。

Answer 1

親ウィンドウがe.viewに保存される理由は、ドラッグがiframeの外側で起こっているためです。 iframeがウィンドウに対してどの位置にあるのか知りたいのであれば、両方のファイルが同じサーバー上にある限り、iframeをどこに置いてもかまいません。これが本当であれば、あなたは次の操作を行うことができます。この後

// get the iframes from the parent 
var iframes = window.parent.document.getElementsByTagName('iframe'); 
var iframe; 

// search through the iframes[] array and match your name 
for (var i = 0; i < iframes.length; i++) { 
    if (iframes[i].src == 'bar.html') { // note, you may have to parse this or add your full pathname 
     iframe = iframes[i]; 
     break; 
    } 
} 
// get the boundaries of the selected iframe 
var rect = iframes[i].getBoundingClientRect(); 

、あなたがdragendイベントのイベントを処理するときに、次の操作を行います。あなたに対するxとyの位置を与える

if(e.view == window) { 
    xoff = e.clientX; 
    yoff = e.clientY; 
} 
else { 
    xoff = e.clientX - rect.left; 
    yoff = e.clientY - rect.top; 
} 

iframe

Answer 2

「ondragend」イベントは、イベントはIFRAMEが含まれているアクティブなドキュメントに泡立てますインラインフレームの外にトリガされた場合....

ブラウザがあるため、セキュリティの異なる起源を持つフレームにアクセスしようとしているスクリプトをブロックあなたがバックエンドで作業している場合の理由....

このthread

におけるセキュリティに関するいくつかの有用な情報aswell ondragstartが、その後にご希望のページをレンダリング&を発射する場合、バックエンドにclientX、clientYプロパティ値を投稿してみてください相対的なポーを得るドラグが発火したときの位置...