jQuery에서 div를 드래그 - 마우스가 느리지 만 빠른 마우스 동작에는 실패 할 때 괜찮음

Question

내 자신의 jQuery 코드를 사용하여 div를 드래그하려고합니다. 마우스의 움직임이

http://jsfiddle.net/craic/kr7Un/

느린 그러나 어떤 빠른 움직임이 상자 밖으로 마우스를 가져오고 추적이 손실 된 경우 jsfiddle에

이 예는 잘 작동합니다. , http://jqueryui.com/demos/draggable/

그러나 나는 라파엘, 키 입력과 통합 할 수 있도록 내 자신의 간단한 버전을 출시 할 :

jQuery를 UI의 드래그이 문제가 당신이 이동하는 속도에 관계없이 잘 추적하지 않습니다 jQuery UI draggable 소스를 살펴 보았습니다. 그러나 그것은 나를 위해 꽤 꿰 뚫을 수없는 것입니다 (800 줄).

이벤트 버블 링에 문제가 있다고 생각하지 않습니다 ... 어떤 아이디어입니까?

Answer 1

두 가지 문제가 있습니다. 하나는 마우스가 요소를 떠날 때 드래그를 취소한다는 것이고, 그렇게하지 않으려는 것입니다. 두 번째는 mousemove가 상자 위에있는 것입니다. 일단 커서가 상자 밖으로 나오면 더 이상 mousemove를 실행하지 않습니다. 드래그하는 요소를 저장 한 다음 mousemove를 전체 페이지에 대신 추가 할 수 있습니다.

EDIT : 실제로 빠른 이동 중에 마우스 클릭을 놓고 커서가 상자 밖에있을 경우 실제로 마우스 업이 문서에 있어야한다고 생각합니다. jsfiddle를 업데이트했습니다.

는 여기를 참조하십시오 : 그것은 마우스 후행 함께 할 수있는 뭔가가처럼

http://jsfiddle.net/Jjgmz/1/

var box = $('#box'); 

box.offset({ 
    left: 100, 
    top: 75 
}); 

var drag = { 
    elem: null, 
    x: 0, 
    y: 0, 
    state: false 
}; 
var delta = { 
    x: 0, 
    y: 0 
}; 

box.mousedown(function(e) { 
    if (!drag.state) { 
     drag.elem = this; 
     this.style.backgroundColor = '#f00'; 
     drag.x = e.pageX; 
     drag.y = e.pageY; 
     drag.state = true; 
    } 
    return false; 
}); 


$(document).mousemove(function(e) { 
    if (drag.state) { 
     drag.elem.style.backgroundColor = '#f0f'; 

     delta.x = e.pageX - drag.x; 
     delta.y = e.pageY - drag.y; 

     $('#log').text(e.pageX + ' ' + e.pageY + ' ' + delta.x + ' ' + delta.y); 

     var cur_offset = $(drag.elem).offset(); 

     $(drag.elem).offset({ 
      left: (cur_offset.left + delta.x), 
      top: (cur_offset.top + delta.y) 
     }); 

     drag.x = e.pageX; 
     drag.y = e.pageY; 
    } 
}); 

$(document).mouseup(function() { 
    if (drag.state) { 
     drag.elem.style.backgroundColor = '#808'; 
     drag.state = false; 
    } 
});​