html - 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

截至 2016 年 2 月，我在 Windows7 上的 FireFox 中遇到不一致的结果。我正在使用拖放来重新定位网页上的控件。它适用于 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 上以及其他人在他们使用的任何系统上成功测试。

这是一个个人项目，Windows 7 计算机是我们的媒体服务器，所以没什么大不了的，但非常奇怪。