CODEWITHSUNDEEP
javascripthtml
NRaf
NRaf

Reputation: 7549

Getting mouse position while dragging (JS + HTML5)

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 when the user is dragging however I'm having some issues.

It seems that the 'mousemove' event doesn't get fired when dragging which is stopping me from figuring out the current position of the mouse. I could use the 'drag' event, however I can't figure out how to get the position from the 'drag' event object.

Upvotes: 23

Views: 51523

Answers (2)

mattsven
mattsven

Reputation: 23253

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

Upvotes: 37

alex
alex

Reputation: 490183

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

});

Upvotes: 16

Related Questions