我在玩与HTML5拖放和跟踪鼠标的位置，而拖动。

直到你松开鼠标OFFSETX和OFFSETY工作真棒，偏移跳转到负数的最后拖动事件调度

这里的HTML：

这里的CSS：

#dragger{

-webkit-user-drag: element;

width: 100px;

height: 100px;

background: hsla(200, 100%, 50%, 0.4);

}​

和JS

$('#dragger').bind('drag', function (e) {

$('#console').html(e.originalEvent.offsetX);

})​

您也可以测试出http://jsfiddle.net/Eu2mz/5/

此外，我只是试图让它在webkit的工作现在。

Answer 1:

我不知道为什么，但在拖动或删除可拖动对象外将改变时offsetX ， offsetY ， clientX ， clientY等特性一些不知所云的编号。

解决方法是preventDefault对文档下降和dragover事件。

document.addEventListener("drag", function( event ) { var element = document.getElementById('console'); element.textContent = event.clientX; }, false); document.addEventListener("dragover", function( event ) { event.preventDefault(); }, false); document.addEventListener("drop", function( event ) { event.preventDefault(); }, false); #dragger{ width: 100px; height: 100px; background: hsla(200, 100%, 50%, 0.4); }

Answer 2:

谷歌浏览器BUG：注意！

我要回报这个为Chrome版本68. *和更早的版本，因此它可能在后面固定。 一直拉我的头发了好半天，我有两个不同的计算机上，都与Windows 10和完全相同的Chrome版本。 一方面，当你开始将它拖到但它跳过了另一台计算机上(完美的作品)的HTML 5幽灵层并不快进！

最后发现，当你改变你的Windows显示设置字体大小出现这种情况。 (右键点击桌面 - >显示设置 - >布局和规模)。

如果您更改字体大小为100％以外的任何东西它搅乱了鬼。 我有一个需要150％的字体大小和我的其他住在100％4K显示器的计算机。

似乎没有被发生在Opera或边缘和hav'nt有时间测试所有的浏览器。 我已经报告给谷歌。

Basic example http://jsfiddle.net/w9uyc5k4/

Answer 3:

您的jsfiddle链接似乎也被窗口大小的影响。 尝试在它自己的文档缩小的可能性？

Answer 4:

我有同样的问题，一个解决方案，将工作时间99.99999％上来。 对此的解释是如下：

解决方案(应该在你的用户会遇到各种情况下工作)

eng.window.addEventListener(

"drag"

,function(event){

//If both screenX and screenY are 0, likely the user just released.

if(!event.screenX && !event.screenY) return;

//Your code here

}

);

说明

我看着通过事件之前就松开鼠标返回，相比它的事件，但没有找到任何东西，会在情况下─100％的工作没有简单的“buttonPressed”功能或类似的隐藏物体内部。

我也看到，虽然，当你释放的光标位置的每一个措施是改变： clientX ， layerX ， offsetX ， pageX ， screenX ，和常规x / y 。 他们都默认为左上值可能，这可能是窗口 - 或屏幕的左上角。

但是，什么是您的用户将进入全屏模式阻力和元素拖放到他们的屏幕非常左上角的像素的可能性有多大？ (在Chrome浏览对我来说， screenX实际上是设置窗口的左边缘;但screenY采用Chrome的HUD考虑)

因此，尽管上述不会以1个边缘的情况下工作(你的用户将有可能永远，永远碰到)，它会工作每个其他时间。

经测试，在Chrome浏览器。

Answer 5:

您可以添加拖动结束事件应该解决的问题。

像这样：

$('#dragger').bind('dragend', function (e) {

$('#console').html(e.originalEvent.offsetX);

})

文章来源: HTML5 Drag Release offsetX offsetY jump