Getting mouse position while dragging (JS + HTML5)

前端未结

关注

 2  1724

I\'m currently implementing a small demo app trying to get my head around drag and drop with HTML5. What I\'m trying to do at the moment is getting the position of the cursor wh

相关标签:

2条回答

南笙

2021-02-05 07:35

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

Runnable code snippet below:

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

<!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>

0 讨论(0)

梦如初夏

2021-02-05 07:51

document.ondragover = function(evt) {
    evt = evt || window.event;
    var x = evt.pageX,
        y = evt.pageY;

    console.log(x, y);
}

jsFiddle.

If you were using jQuery...

$(document).on('dragover', function(evt) {
    var x = evt.pageX,
        y = evt.pageY;

    console.log(x, y);

});

0 讨论(0)