html5ドラッグイベントのX値とY値がブラウザ間で矛盾しています

Question

Chrome、Safari、Firefoxで次のjsFiddleを確認してください。それは私が見ているものを詳細に説明する必要があります。

要約すると、dragイベントとdragendイベントは、xとyの値を持たないか、または奇妙なxとyの値を持ちます。

は（以下貼り付けコードを参照してください） http://jsfiddle.net/CgzV3/10/

は、ブラウザでこれらのバグはありますか？ ドラッグ・アンド・ドラッグ・イベントでブラウザが最終的に合理的なxとy値を持つことが期待できますか？ 最終的にFireFoxがoffsetXとoffsetY、dragenter/dragleave/dragover/dropイベントをサポートすることは期待できますか？

おかげで、 ネイト

HTML：

<aside draggable="true" id="dragme"> 
    Drag Me 
</aside> 

<aside droppable="true" id="drophere"> 
    Drop Here 
</aside> 

<div id="notes"> 
    Notes: 
    <ul> 
     <li>drag: In Chrome the x/y values for drag are reasonable as the drag is happening, 
      but then you get some crazy values in the last drag event when 
      the element is dropped.</li> 
     <li>drag: In Firefox, there are no x/y values in drag events at all</li> 
     <li>drag: In Safari, the x/y values in drag events seem reasonable</li> 
     <li>dragend: In Chrome, the x/y values in dragend are just strange. The screenX/screenY values seem to be almost accurate, except they are offset by the distance from the bottom left corner of the dragged element to the place where the dragged element was grabbed.</li> 
     <li>dragend: In Safari, the x/y values in the dragend seem to all be relevant to the outer window, not the iframe (which exists since this is inside jsFiddle. This is different from the dragstart event, which sets all the x/y values (except for screenX/screenY) relative to the iframe</li> 
     <li>dragend: In Firefox, there is only screenX/y, and it seems right.</li> 
     <li>dragenter/dragover/dragleave/drop: Seem good in Chrome/Safari/FireFox except that FireFox does not have offsetX/Y values</li> 
    </ul> 
</div> 

のjavascript：

function setCell(eventType, label, x, y) { 
    var row = ['', 'dragstart', 'drag', 'dragend', '', 
       'dragenter', 'dragover', 'dragleave', 
       'drop'].indexOf(eventType); 
    var cell = ['', 'client', 'page', 'screen', 'offset'].indexOf(label); 
    var val = [x, y].join('/'); 
    document.getElementsByTagName('table')[0].rows[row].cells[cell].textContent = val; 
} 

function setRow(evt) { 
    var eventType = evt.type; 
    setCell(eventType, 'client', evt.clientX, evt.clientY); 
    setCell(eventType, 'page', evt.pageX, evt.pageY); 
    setCell(eventType, 'screen', evt.screenX, evt.screenY); 
    setCell(eventType, 'offset', evt.offsetX, evt.offsetY); 
} 

function dragstart(evt){ 
    // FF needs this 
    evt.dataTransfer.setData("text/plain", "asd"); 
    setRow(evt); 
} 

function dragover(evt){ 
    evt.preventDefault(); 
    if (evt.stopPropagation) evt.stopPropagation(); 
    setRow(evt); 
} 

function drop(evt) { 
    console.log(evt.stopPropagation); 
    if(evt.preventDefault) evt.preventDefault(); 
    if (evt.stopPropagation) evt.stopPropagation(); 
    setRow(evt); 
} 


var dragme = document.getElementById('dragme'); 
dragme.addEventListener('dragstart',dragstart,false); 
dragme.addEventListener('drag',setRow,false); 
dragme.addEventListener('dragend',setRow,false); 
drophere.addEventListener('dragenter',setRow,false); 
drophere.addEventListener('dragover',dragover,false); 
drophere.addEventListener('dragleave',setRow,false); 
drophere.addEventListener('drop',drop,false); 

Answer 1

は、私はあなたが比較的ブラウザにカーソルの位置を取るべきではないと思います。あなたのページの要素に対するカーソルの位置は、すべてのブラウザで同じ番号を与えるべきです。

var x = evt.pageX - $('#element').offset().left 
    var y = evt.pageY - $('#element').offset().top 

Answer 2

2016年2月現在、Windows7上でFireFoxで矛盾した結果が発生しています。私はドラッグアンドドロップを使用して、Webページのコントロールを再配置しています。これは、のWindows7上のFireFoxのV42、V43とV44以外の作品：

問題がdragendイベント（である）：

• event.screenXとevent.screenYは大きすぎる値を持ちます。 dragStart（）の値は正しいです。テストされた他のマシンにはこの問題はありません。

• event.clientXとevent.clientYは常に0です。これはFFでは正常です。

• event.offsetYは信頼できません。通常は、それはyドロップ座標の負の値です。たとえば、yが100になると、FFはevent.offsetYを-100に設定します。 - （event.offsetY）を使用してコントロールを配置すると、常に100〜110の範囲内になります。これは非常に奇妙ですが、event.screenX/Yがこの点で重要な変数であるため大したことではありません。

開発マシンはWindows8で、Chrome、FF、IE、Operaで動作します。 FFでLXDEで、他の人が使用していたどのシステムであれ、succesffullyをテストしました。

それは個人的なプロジェクトであり、Windows 7コンピュータは私たちのメディアサーバーですので、大したことではありませんが、非常に奇妙です。