2013-09-03 2 views
3

나는이 피들을 가지고있다 http://jsfiddle.net/JqBZb/193/ 붉은 광장을 눌렀을 때만 내 물건을 움직이기를 원하지만, 사용자가 마우스를 놓을 때 mousemove 동작을 제거 할 수 없다. 그 후에도 여전히 움직입니다.jquery mousemove 멈추는 방법

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

원래 회전 스크립트가이 답변 https://stackoverflow.com/a/10235298/1168944

+1

마우스가 올려 져있을 때 상자 위로 마우스를 가져 가면 멈추게됩니다. http://jsfiddle.net/JqBZb/195/ – jdepypere

+1

이전 버전의 jQuery를 사용하고 있다면 bind '및'unbind '. [** fiddle **] (http://jsfiddle.net/JqBZb/204/). –

답변

2

이 스크립트에이 추가 거짓 확인.

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

내가 off()을 수용하기 위해,뿐만 아니라 jQuery를 최신 버전으로 업데이트되었습니다.

+0

작동! 고마워요! – Mike

+0

반갑습니다. 도와 줘서 다행 :) – Archer

3

에 의해 제공되었다 부울로 만들기 mouseDown에 해당하는 경우 그것은 당신이 마우스 버튼을 놓으면 때마다 mousemove 이벤트 처리기를 바인딩 해제 .../

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

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

DEMO