jQuery में एक div खींचना - ठीक है जब माउस धीमा होता है, लेकिन तेज माउस आंदोलन

Question

पर विफल रहता है, मैं अपने स्वयं के jQuery कोड का उपयोग करके चारों ओर एक div खींचना चाहता हूं।

यह उदाहरण jsfiddle पर ठीक काम करता है जब माउस आंदोलनों धीमी

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

हैं लेकिन किसी भी तेजी से आंदोलन बॉक्स से बाहर माउस खींचती है और ट्रैकिंग खो दिया है।

jQuery यूआई खींचने योग्य यह समस्या है और की परवाह किए बिना ठीक पटरियों आप कितनी तेजी से स्थानांतरित नहीं होता: http://jqueryui.com/demos/draggable/

लेकिन मैं अपने ही सरल संस्करण रोल करने ताकि मैं इसे राफेल, कुंजी दबाव के साथ एकीकृत कर सकते हैं चाहते हैं, आदि। मैंने jQuery यूआई ड्रैगगेबल स्रोत को देखा है, लेकिन यह मेरे लिए, सुंदर अभेद्य (800 लाइनें) है।

मुझे नहीं लगता कि यह घटना बुलबुले के साथ एक मुद्दा है ... कोई विचार?

Answer 1

2 मुद्दे हैं। एक यह है कि जब माउस तत्व छोड़ देता है तो आप ड्रैग को रद्द कर रहे हैं, आप ऐसा नहीं करना चाहते हैं। दूसरा यह है कि मूसोम केवल बॉक्स पर है, एक बार कर्सर बॉक्स से बाहर हो जाने के बाद यह अब mousemove निष्पादित करने जा रहा है। आप जिस तत्व को खींच रहे हैं उसे संग्रहीत कर सकते हैं और उसके बाद mousemove को पूरे पृष्ठ पर जोड़ सकते हैं।

संपादित करें: असल में, मुझे लगता है कि माउसअप को वास्तव में दस्तावेज़ पर भी होना चाहिए यदि आप एक तेज गति के दौरान माउस क्लिक करते हैं और आपका कर्सर बॉक्स के बाहर होता है। 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; 
    } 
});​