Question

4

Getting mouse position while dragging (JS + HTML5)

rated 0 times [ 7] [ 3] / answers: 1 / hits: 45523 / 13 Years ago, wed, april 27, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

allans

Add To Favorites

Follow

Total Points: 336

Total Questions: 120

Total Answers: 119

Location: Peru

Member since Mon, Jun 6, 2022

2 Years ago

answered 13 Years ago jacklynr · Accepted Answer

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