Jquery mousemove how to stop

Question

I have this http://jsfiddle.net/JqBZb/193/ script where I want my object to move only when the red square is pressed, but I cannot delete the mousemove action when the user releases the mouse. After that, he continues to move.

HTML:

<div class="pointer"> <div class="marker"></div> </div> 

CSS

 .marker { background:#ED1C24; height:2px; right:0; position:absolute; top:35px; width:7px } .pointer { height:72px; position:absolute; top:82px; width:72px; border:1px solid red; left:100px; } 

JAVASCRIPT:

 var img = $('.pointer'); var offset = img.offset(); function mouse(evt) { var center_x = (offset.left) + (img.width() / 2); var center_y = (offset.top) + (img.height() / 2); var mouse_x = evt.pageX; var mouse_y = evt.pageY; var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); var degree = (radians * (180 / Math.PI) * -1) + 90; img.css('-moz-transform', 'rotate(' + degree + 'deg)'); img.css('-webkit-transform', 'rotate(' + degree + 'deg)'); img.css('-o-transform', 'rotate(' + degree + 'deg)'); img.css('-ms-transform', 'rotate(' + degree + 'deg)'); } img.mousedown(function (e) { $(document).mousemove(mouse); }).mouseup(function (e) { e.stopPropagation(); }) 

The initial rotation of the script was provided by this answer .

Answer 1

Add this to your script ...

 $(document).mouseup(function() { $(document).off("mousemove", mouse); }); 

Disables the mousemove event mousemove whenever you release the mouse button.

http://jsfiddle.net/JqBZb/201/

I also upgraded it to a later version of jQuery to accommodate off() .

Answer 2

Create a bool to check if mouseDown is true / false

  var mouseDown = false; if(mouseDown ==true){ //move code } 

Demo