Wartości X i Y w zdarzeniach przeciągania html5 są niespójne w różnych przeglądarkach.

Question

Sprawdź następujące jsFiddle w przeglądarce Chrome, Safari i Firefox. Powinno to szczegółowo wyjaśnić, co widzę.

Podsumowując, zdarzenia przeciągania i przeciągania nie mają wartości x i y lub mają dziwne wartości xiy.

(patrz kod wklejony poniżej) http://jsfiddle.net/CgzV3/10/

Czy te błędy w przeglądarkach? Czy możemy oczekiwać, że przeglądarki będą miały w końcu rozsądne wartości xiy w operacjach przeciągania i przeciągania? Czy możemy się spodziewać, że FireFox w końcu obsługuje offsetX i offsetY oraz zdarzenia dragenter/dragleave/dragover/drop?

Dzięki, 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

myślę, że nie powinien przyjąć pozycję kursora relatywnie do przeglądarki. Pozycja kursora względem elementu na stronie powinna dawać te same liczby w każdej przeglądarce. Można użyć kodu:

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

Answer 2

Począwszy od lutego 2016 roku, mam niespójne wyniki w FireFox na Windows7. Używam przeciągania i upuszczania do zmiany położenia kontrolek na stronie internetowej. Współpracuje z wyjątkiem FireFox V42, V44 i v43 na Windows7:

Problem jest z dragEnd():

• event.screenX i event.screenY mają wartości, które są zbyt duże. Wartości dragStart() są poprawne. Inne przetestowane maszyny nie mają tego problemu.

• event.clientX i event.clientY są zawsze 0. Wierzę, że to normalne dla FF.

• event.offsetY nie jest niezawodny. Zwykle jest to wartość ujemna współrzędnej spadku y. Na przykład, jeśli y zostanie obliczone na 100, FF ustawi event.offsetY na -100. Jeśli użyję - (event.offsetY) do ustawienia kontroli, to zawsze będzie ona w zakresie od 100 do 110. Jest to bardzo dziwne, ale nie wielkie, ponieważ event.screenX/Y to kluczowe zmienne w tym.

Maszyna programująca to Windows8 i działa w Chrome, FF, IE i Opera. Testowane z powodzeniem na LXDE w FF i przez innych na dowolnych systemach, z których korzystali.

Jego osobisty projekt i komputer z Windows 7 to nasz serwer mediów, więc nie jest to wielka sprawa, ale niesamowita.