Return beginning and ending coordinates of a mouse drag 1

maharg · Feb 21, 2014

Hi

I have built a simple css based charting system and I want to be able to drag the mouse over a certain area, get the beginning and ending X and Y co-ordinates, so that I can re-draw the graph for the selected region the mouse was dragged over.

All I need is the X and Y co ordinates when the button is pressed, before the drag, and the X and Y co-ordinates when the button is released, after the drag.

Any pointer on how to achieve this would be much appreciated.

Regards,

Graham

jpadie · Feb 21, 2014

the clientX and clientY attributes return the x and y position of the mouse pointer.

use mousedown and mouseup events to capture the position.

maharg · Feb 21, 2014

Many thanks jpadie,

This is what I came up with ...

Code:

<!doctype html>
<html>
<head>
<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>[/URL]
</head>
<body>

<div style="width:1000px; height:500px; background-color:#dddddd"></div>


<script>
$("div")
.mousedown(function() {
var coorddnx=event.clientX;
var coorddny=event.clientY;
$( this ).append( "Down: x="+coorddnx+", y="+coorddny+"<br>" );
})

.mouseup(function() {
var coordupx=event.clientX;
var coordupy=event.clientY;
$( this ).append( "<span style='color:#f000;'>Up:  x="+coordupx+", y="+coordupy+"<br><br>" );
});
</script>


</body>
</html>

Would I need to do any cross-browser fiddles on that?

Regards,

Graham

jpadie · Feb 22, 2014

sure. I'd do this to guarantee the availability of the event object

Code:

<!doctype html>
<html>
<head>
<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>[/URL]
</head>
<body>

<div style="width:1000px; height:500px; background-color:#dddddd"></div>


<script>
var inCapture = false;
$("div")
.mousedown(function( [COLOR=#EF2929]e[/color] ) {
var coorddnx=[COLOR=#EF2929]e[/color].clientX;
var coorddny=[COLOR=#EF2929]e[/color].clientY;
$( this ).append( "Down: x="+coorddnx+", y="+coorddny+"<br>" );
inCapture = true;
})

.mouseup(function( [COLOR=#EF2929]e[/color] ) {
 if(inCapture){
  var coordupx=[COLOR=#EF2929]e[/color].clientX;
  var coordupy=[COLOR=#EF2929]e[/color].clientY;
  $( this ).append( "<span style='color:#f000;'>Up:  x="+coordupx+", y="+coordupy+"<br><br>" );
  inCapture = false;
 }
});
</script>


</body>
</html>

maharg · Feb 22, 2014

Thanks jpadie, now works on all browsers I have.

May I ask you to exmpain the purpose of the inCapture variable?

Thanks
Graham

jpadie · Feb 22, 2014

sure. it means that you don't get mouseup events when you are not 'capturing' a drag.
an alternative way to do it would be to attach the mouseup event only within the mousedown event. and then releasing it within the mouseup event handler.

this may not be needed for your application.

you might also consider not invoking a drag unless a mouseup event fails to follow a mousedown event within x secs. i.e. that it does not interact with click and double click events.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Return beginning and ending coordinates of a mouse drag 1

maharg

Technical User

jpadie

Technical User

maharg

Technical User

jpadie

Technical User

maharg

Technical User

jpadie

Technical User

Similar threads

Part and Inventory Search

Sponsor