問(wèn)題描述

我正在玩 HTML5 拖放并在拖動(dòng)時(shí)跟蹤鼠標(biāo)位置.

OffsetX 和 OffsetY 非常棒，直到您釋放鼠標(biāo)，偏移量會(huì)在最后一次調(diào)度的拖動(dòng)事件中跳轉(zhuǎn)到負(fù)數(shù)

這是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/ 進(jìn)行測(cè)試/p>

我現(xiàn)在只是想讓它在 webkit 中工作.

我遇到了同樣的問(wèn)題，并想出了一個(gè)在 99.99999% 的時(shí)間里都有效的解決方案.解釋如下:

解決方案(應(yīng)該適用于您的用戶(hù)遇到的所有情況)

eng.window.addEventListener(拖",函數(shù)(事件){//如果screenX和screenY都為0，可能是用戶(hù)剛剛釋放.if(!event.screenX && !event.screenY) 返回；//你的代碼在這里});

說(shuō)明

我查看了釋放鼠標(biāo)時(shí)返回的事件并將其與之前的事件進(jìn)行了比較，但找不到任何可以在 100% 的情況下工作的東西 - 沒(méi)有簡(jiǎn)單的buttonPressed".隱藏在對(duì)象內(nèi)部的特征等.

我確實(shí)看到，當(dāng)您釋放時(shí)，光標(biāo)位置的每一個(gè)測(cè)量值都會(huì)發(fā)生變化:clientX、layerX、offsetX、pageX、screenX 和常規(guī) x/y.它們都默認(rèn)為左上角的值，可能是窗口或屏幕的左上角.

但是，您的用戶(hù)進(jìn)入全屏模式并將元素拖放到屏幕左上角像素的可能性有多大?(在我的 Chrome 中，screenX 實(shí)際上設(shè)置在窗口的左邊緣；但 screenY 考慮了 Chrome 的 HUD)

因此，雖然上述方法不適用于那種邊緣情況(您的用戶(hù)可能永遠(yuǎn)不會(huì)遇到)，但它會(huì)每隔一段時(shí)間起作用.

在 Chrome 中測(cè)試.

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.

這篇關(guān)于HTML5 Drag Release offsetX offsetY跳轉(zhuǎn)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！