HTML5 Drag Release offsetX offsetY jump

Question

我正在玩HTML5拖放并在拖动时跟踪鼠标位置。

OffsetX和OffsetY工作真棒，直到您释放鼠标，在最后一次拖动事件调度时，偏移跳转到负数

这是html：

<div id="dragger"></div>
<div id="console"></div>

这是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

您的jsfiddle链接似乎也受窗口大小的影响。尝试使用它自己的文档来缩小可能性吗？

Answer 2

我不知道为什么，但是当拖动或拖放到可拖动对象之外时，会将offsetX，offsetY，clientX，clientY等属性更改为某些属性难以理解的数字。

有关文档放弃和dragover事件的修复preventDefault。

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

<div draggable="true" id="dragger" ondragstart="event.dataTransfer.setData('text/plain',null)"></div>
<div id="console"></div>

Answer 3

我遇到了同样的问题，并提出了一个可以在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 4

Google Chrome浏览器错误：请注意！

我报告的是Chrome 68. *及更低版本，因此以后可能会修复。 我有两台不同的计算机，都装有Windows 10和完全相同的Chrome版本，这使我久违了。一方面，当您开始拖动HTML 5幻影层时，它不会（在完美运行的情况下）在另一台计算机上向前跳跃！

最后发现，当您在“ Windows显示设置”上更改字体大小时，会发生这种情况。 （右键单击桌面->显示设置->缩放和布局）。

如果将字体大小更改为100％以外的任何值，则会使幻影混乱。我有一台配备4k显示器的计算机，它需要150％的字体大小，而另一台则保持100％。

在Opera或Edge中似乎没有发生，并且没有时间测试所有浏览器。 我已经将它报告给了Google。

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

Answer 5

你可以添加拖动结束事件来解决问题 像这样：

$('#dragger').bind('dragend', function (e) {
     $('#console').html(e.originalEvent.offsetX);
})