X and Y values in html5 drag events are inconsistent across browsers

Question

Check out the following jsFiddle in Chrome, Safari, and Firefox. It should explain in good detail what I'm seeing.

In summary, the drag and dragend events either do not have x and y values or have bizarre x and y values.

(see code pasted below) http://jsfiddle.net/CgzV3/10/

Are these bugs in the browsers? Can we expect that the browsers will eventually have reasonable x and y values in the drag and dragend events? Can we expect FireFox to eventually support offsetX and offsetY and the dragenter/dragleave/dragover/drop events?

Thanks, 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

As of Feb 2016, I am having inconsistent results in FireFox on a Windows7. I'm using drag and drop to reposition controls on a web page. It works except for FireFox v42, v43 and v44 on Windows7:

The problem is with dragEnd():

• event.screenX and event.screenY have values that are too large. The dragStart() values are correct. Other machines tested do not have this problem.

• event.clientX and event.clientY are always 0. I believe this is normal for FF.

• event.offsetY is not reliable. Normally, it is the negative value of the y drop coordinate. For example, if y calculates to 100, FF will set event.offsetY to -100. If I use -(event.offsetY) to position the control then it will always be in the range 100 to 110. This is extremely weird but not a big deal as the event.screenX/Y are the key variables in this.

The development machine is Windows8 and it works in Chrome, FF, IE, and Opera. Tested succesffully on LXDE in FF and by others on whatever systems they were using.

Its a personal project and the Windows 7 computer is our media server so not a big deal all around, but extremely weird.