我目前正在实施一个小型的演示应用程序试图让我的头脑与HTML5拖放.我正在尝试做的是在用户拖动时获取光标的位置,但是我遇到了一些问题.
拖动时似乎'mousemove'事件没有被触发,这阻止了我搞清楚鼠标的当前位置.我可以使用'drag'事件,但我无法弄清楚如何从'drag'事件对象中获取位置.
mat*_*ven 25
// JavaScript
document.addEventListener("dragover", function(e){
e = e || window.event;
var dragX = e.pageX, dragY = e.pageY;
console.log("X: "+dragX+" Y: "+dragY);
}, false);
// jQuery
$("body").bind("dragover", function(e){
var dragX = e.pageX, dragY = e.pageY;
console.log("X: "+dragX+" Y: "+dragY);
});
Run Code Online (Sandbox Code Playgroud)
下面的Runnable代码段:
// JavaScript (a really great library that extends jQuery, check it out)
document.addEventListener("dragover", function(e){
e = e || window.event;
var dragX = e.pageX, dragY = e.pageY;
console.log("X: "+dragX+" Y: "+dragY);
}, false);
// jQuery (the native-language JavaScript is written in)
$("body").bind("dragover", function(e){
var dragX = e.pageX, dragY = e.pageY;
console.log("X: "+dragX+" Y: "+dragY);
});Run Code Online (Sandbox Code Playgroud)
<!doctype>
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>LOL drag something over me (open the console)</body>
</html>Run Code Online (Sandbox Code Playgroud)
ale*_*lex 14
document.ondragover = function(evt) {
evt = evt || window.event;
var x = evt.pageX,
y = evt.pageY;
console.log(x, y);
}
Run Code Online (Sandbox Code Playgroud)
如果你使用的是jQuery ......
$(document).on('dragover', function(evt) {
var x = evt.pageX,
y = evt.pageY;
console.log(x, y);
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
26184 次 |
| 最近记录: |