HTML5 Drag Release offsetX offsetY跳转 [英] HTML5 Drag Release offsetX offsetY jump

问题描述

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

OffsetX 和 OffsetY 非常棒，直到您释放鼠标，偏移量会在最后一次调度的拖动事件中跳转到负数

这是html:

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

这是css:

#dragger{-webkit-user-drag:元素；宽度:100px；高度:100px；背景:hsla(200, 100%, 50%, 0.4);}

和js

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

您也可以在 http://jsfiddle.net/Eu2mz/5/ 进行测试/p>

我现在只是想让它在 webkit 中工作.

解决方案

我遇到了同样的问题，并想出了一个在 99.99999% 的时间里都有效的解决方案.解释如下:

解决方案(应该适用于您的用户遇到的所有情况)

eng.window.addEventListener(拖",函数(事件){//如果screenX和screenY都为0，可能是用户刚刚释放.if(!event.screenX && !event.screenY) 返回；//你的代码在这里});

说明

我查看了释放鼠标时返回的事件并将其与之前的事件进行了比较，但找不到任何可以在 100% 的情况下工作的东西 - 没有简单的buttonPressed".隐藏在对象内部的特征等.

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

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

因此，虽然上述方法不适用于那种边缘情况(您的用户可能永远不会遇到)，但它会每隔一段时间起作用.

在 Chrome 中测试.

I'm playing with the HTML5 drag and drop and tracking the mouse position while dragging.

OffsetX and OffsetY works awesome until you release the mouse, the offsets jump to a negative number on the last drag event dispatched

here's the html:

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

here's the css:

#dragger{
    -webkit-user-drag: element;
    width: 100px;
    height: 100px;
    background: hsla(200, 100%, 50%, 0.4);
}​

and the js

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

You can also test out at http://jsfiddle.net/Eu2mz/5/

Also I'm just trying to get it to work in webkit for now.

解决方案

I had the same problem and came up with a solution that will work 99.99999% of the time. the explanation is below:

Solution (should work in every case your users will run into)

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

Explanation

I looked through the event returned on releasing the mouse and compared it to the event immediately before, and couldn't find anything that will work in 100% of the cases- there's no easy "buttonPressed" feature or the like hidden inside the object.

I did see though that every single measure of cursor position is changed when you release: clientX, layerX, offsetX, pageX, screenX, and regular x/y. They all default to the top-left value possible, which may be the top-left corner of the window- or the screen.

But what is the likelihood that your user will go into fullscreen mode drag and drop an element into the very top-left pixel of their screen? (In Chrome for me, screenX is actually set to the left edge of the window; but screenY takes Chrome's HUD into account)

So while the above won't work in that 1 fringe case (that your users will likely never-ever run into), it will work every other time.

Tested in Chrome.

这篇关于HTML5 Drag Release offsetX offsetY跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！