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

在Chrome、Safari和Firefox中查看以下JSFIDLE。它应该很详细地解释我所看到的

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

（参见下面粘贴的代码）

浏览器中有这些bug吗？ 我们能期望浏览器在拖放事件中最终有合理的x和y值吗？ 我们能期望FireFox最终支持offsetX和offsetY以及dragenter/dragleave/dragover/drop事件吗

谢谢， 内特

html:

---

我认为您不应该选择光标相对于浏览器的位置。光标相对于页面上某个元素的位置应在每个浏览器上显示相同的数字。您可以使用如下代码：

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

---

截至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的范围内。这非常奇怪，但不是什么大问题，因为事件。screenX/Y是其中的关键变量

开发机器是Windows8，它在Chrome、FF、IE和Opera中工作。在FF的LXDE上测试成功，其他人在他们使用的任何系统上测试成功

---

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

在我的项目中看到了同样的问题（这就是我开始搜索并在这里找到的原因）。当窗口最大化时，值似乎是正常的。但是当它不是最大屏幕尺寸时，一切都会出错，双屏幕=相同的问题只有更大的x数字：pIn最新的Safari，

dragend

的x/y值似乎与左下角附近的点有关，而不是人们所期望的左上角。我也面临HTML5拖放api的同样问题。

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

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