HTML5拖放事件中的X和Y值在不同浏览器中不一致

Question

请在Chrome、Safari和Firefox中查看以下jsFiddle。它应该详细解释了我所看到的内容。

总之，拖动和拖放事件要么没有x和y值，要么有奇怪的x和y值。

（见下面粘贴的代码） http://jsfiddle.net/CgzV3/10/ 这些是浏览器中的错误吗？ 我们能否期望浏览器最终会在拖动和拖放事件中具有合理的x和y值？ 我们能否期望FireFox最终支持offsetX和offsetY以及dragenter/dragleave/dragover/drop事件？

谢谢， 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); 

- nbrustein

---

在我的项目中遇到了同样的问题（这就是我开始搜索并来到这里的原因）。当窗口最大化时，值似乎是正确的。但当它不在最大屏幕尺寸时，一切都会出错，双屏幕=相同的问题只是更大的x数字:p - joopmicroop

在最新版的Safari中，dragend事件的x/y值似乎是相对于左下角附近的一个点而不是像人们期望的那样相对于左上角。 - Zarel

Answer 1

截至2016年2月，在Windows7上使用FireFox，我在重新定位网页控件时遇到了不一致的结果。虽然它可以正常工作，但是在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中都可以正常工作。在LXDE中的FF上成功测试，而其他人则在他们使用的系统上进行了测试。这是一个个人项目，Windows 7计算机是我们的媒体服务器，所以整体上并不是什么大问题，但确实非常奇怪。

- Chris DeFreitas

---

我也遇到了HTML5拖放API的同样问题。 - rab

Answer 2

我认为你不应该将光标的位置相对于浏览器来考虑。相对于页面上的元素，光标的位置在每个浏览器上都应该给出相同的数字。你可以使用以下代码：

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

- NielsB95