HTML5 Drag Release offsetX offsetY jump

Question

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

偏移X和偏移Y的工作非常棒，直到你释放鼠标，偏移在最后一次拖动事件调度时跳到负数

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

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

修复是针对文档拖放事件的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 2

我遇到了同样的问题，并提出了一个解决方案，该解决方案在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%的情况下都能工作的东西——这并不容易；按钮按下"；隐藏在对象内部的特征等。

不过，我确实看到，当您发布时，光标位置的每一个度量都会发生变化：clientX、layerX、offsetX、pageX、screenX和常规x/y。它们都默认为左上角的值，可能是窗口或屏幕的左上角。

但是，你的用户进入全屏模式，将元素拖放到屏幕左上角像素的可能性有多大？（对我来说，在Chrome中，screenX实际上设置在窗口的左边缘；但screenY考虑了Chrome的HUD）

因此，虽然以上内容在1边缘情况下不起作用（你的用户可能永远不会遇到），但它每隔一段时间就会起作用。

铬测试。

Answer 3

谷歌Chrome BUG：请注意

我在Chrome 68.*及更早版本中报告了这一问题，因此稍后可能会进行修复。我有两台不同的电脑，都有Windows 10和完全相同版本的Chrome，我已经很长时间了。一方面，当你开始拖动HTML5重影层时，它不会向前跳过，但在它跳过的另一台计算机上（效果很好）！

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

如果你将字体大小更改为100%以外的任何其他大小，就会把重影搞砸。我有一台4k显示器的电脑，需要150%的字体大小，而我的另一台则保持在100%。

Opera或Edge中似乎没有出现这种情况，也没有时间测试所有浏览器。我已经向谷歌报告了。

Basic examplehttp://jsfiddle.net/w9uyc5k4/

Answer 4

您的jsfiddle链接似乎也受到窗口大小的影响。试试它自己的医生来缩小可能性？

Answer 5

您可以添加拖动结束事件，它应该可以解决问题
像这样：

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