9

我正在玩 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 中工作。

4

5 回答 5

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% 的情况下工作的东西——对象内没有简单的“buttonPressed”功能或类似的东西。

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

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

因此，虽然上述方法在第一种边缘情况下不起作用（您的用户可能永远不会遇到），但它会每隔一段时间起作用。

在 Chrome 中测试。

于 2017-11-11T18:30:31.280 回答
2

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

修复是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>

于 2015-09-09T17:44:02.530 回答
1

谷歌浏览器 BUG：注意！

我从 Chrome 版本 68.* 及更早版本开始报告此问题，因此稍后可能会修复它。因为我有两台不同的电脑，都安装了 Windows 10 和完全相同的 Chrome 版本，所以我一直在拉我的头发。一方面，当您开始在它跳过的另一台计算机上拖动它时，HTML 5 幽灵层不会向前跳过（完美运行）！

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

如果您将字体大小更改为 100% 以外的任何值，则会弄乱幽灵。我有一台带有 4k 显示器的电脑，需要 150% 的字体大小，而我的另一台则保持在 100%。

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

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

于 2018-08-07T15:30:57.090 回答
0

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

于 2012-08-27T04:38:53.867 回答
-1

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

$('#dragger').bind('dragend', function (e) {
     $('#console').html(e.originalEvent.offsetX);
})
于 2012-08-27T19:47:59.220 回答