I valori X e Y negli eventi di trascinamento HTML5 sono incoerenti tra i browser

Question

Controlla il seguente jsFiddle in Chrome, Safari e Firefox. Dovrebbe spiegare in dettaglio cosa sto vedendo.

In sintesi, gli eventi di trascinamento e trascinamento non hanno valori xey o hanno valori xey y bizzarri.

(vedi codice incollato sotto) http://jsfiddle.net/CgzV3/10/

Sono questi bug nei browser? Possiamo aspettarci che i browser avranno eventualmente valori xey ragionevoli negli eventi drag and dragend? Possiamo aspettarci che FireFox supporti eventualmente offsetX e offsetY e gli eventi dragenter/dragleave/dragover/drop?

Grazie, Nate

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

penso che non si deve prendere la posizione del cursore relativamente al browser. La posizione del cursore relativa a un elemento sulla tua pagina dovrebbe darti gli stessi numeri su ogni browser. È possibile utilizzare codice come questo:

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

Answer 2

A partire da febbraio 2016, sto avendo risultati incoerenti in FireFox su un Windows7. Sto usando il drag and drop per riposizionare i controlli su una pagina web. Funziona ad eccezione di FireFox V42, V43 e V44 in Windows7:

Il problema è con dragend():

• event.screenX e event.screenY hanno valori che sono troppo grandi. I valori dragStart() sono corretti. Altre macchine testate non hanno questo problema.

• event.clientX e event.clientY sono sempre 0. Credo che questo sia normale per FF.

• event.offsetY non è affidabile. Normalmente, è il valore negativo della coordinata y drop. Ad esempio, se si calcola a 100, FF imposterà event.offsetY a -100. Se uso - (event.offsetY) per posizionare il controllo, sarà sempre nell'intervallo da 100 a 110. Questo è estremamente strano ma non è un grosso problema come l'event.screenX/Y sono le variabili chiave in questo.

Il computer di sviluppo è Windows8 e funziona in Chrome, FF, IE e Opera. Testato con successo su LXDE in FF e da altri su qualunque sistema stessero usando.

Il suo progetto personale e il computer Windows 7 sono i nostri server multimediali, quindi non è un grosso problema, ma estremamente strano.