माउसअप को निकाल दिए जाने पर माउस कैसे चल रहा है यह पता लगाने के लिए?

Question

मैंने खींचकर पेज पैनोरेट को लागू करने का प्रयास किया है। मेरे कार्यान्वयन में पृष्ठ थोड़ी देर के लिए चलता है जब उपयोगकर्ता ने माउस बटन को जारी किया है, जैसे Google मानचित्र में मानचित्र खींचना। अब जब मैं बटन जारी करता हूं तो माउस इस प्रभाव को रोकना चाहता है, जब माउस आगे नहीं बढ़ता है। समस्या यह है कि, अगर मैं mouseup ईवेंट निकाल दिया जाता है तो माउस वास्तव में यह पता लगाने के लिए नहीं पता कि कैसे पता चलता है।

अभी के लिए मैंने ड्रैगिंग गति की गणना करके इस समस्या से निपटने की कोशिश की है और फिर गति की तुलना पूर्व-मूल्यवान "संवेदनशीलता" से करें, जो ज्यादातर समय काम करती है, लेकिन कभी-कभी यह विफल हो जाती है।

jsFiddle पर सरलीकृत उदाहरण। पहेली के चारों ओर खेलते समय, कृपया एफएफ में मिडलबटन का उपयोग करें, ड्रैगगैबल div "स्टिक" बाएं बटन पर।

स्यूडोकोड:

AniMove = function (doc, element, sensitivity, panspeed, duration) { 
    var mouseDown = function (e) { 
      sTime = new Date(); 
      originalX = mouseX = e.clientX; 
      originalY = mouseY = e.clientY; 
      /* addEventListeners mousemove & mouseup for document */ 
      return; 
     }, 
     mouseMove = function (e) { 
      /* Setting new position for #square + new mouseX & Y */ 
      return; 
     }, 
     mouseUp = function() { 
      var dc = 1; 
       /* removeEventListeners mousemove & mouseup */ 
       eTime = new Date(); 
       vX = Math.round((50 * panspeed) * (originalX - mouseX)/(eTime - sTime)); 
       vY = Math.round((50 * panspeed) * (originalY - mouseY)/(eTime - sTime)); 

      // Check whether mouse is moving or not, 
      // now checking the speed against sensitivity, which is not reliable 

       if (Math.abs(vX) < sensitivity){vX = 0;} 
       if (Math.abs(vY) < sensitivity){vY = 0;} 

       for (n = 0; n < dur; n++, dc += 0.001) { 
        vX = Math.round(vX * dec/dc); 
        vY = Math.round(vY * dec/dc); 
        delay[n] = setTimeout(endDrag(n, vX, vY), n * 50); 
       } 
       return; 
      }, 
      endDrag = function (n, vX, vY) { 
       /* Setting new position for #square */ 
       return; 
      }, 
      dec = 1 - 120/duration; 
    panspeed *= -0.01; 
    duration /= 50; 
    element.addEventListener('mousedown', mouseDown, false);  
} 
drag = new AniMove(document, document.getElementById('square'), 20, 100, 500); 

इसलिए, यह भी संभव हो तो माउस या इस स्थिति में नहीं चलती है पता लगाने के लिए है? शायद मुझे इस काम के लिए एक अलग दृष्टिकोण की जरूरत है?

Answer 1

एक विचार माउसमोव श्रोता को माउसअप के बाद 5 सेकंड के लिए सक्रिय रखना है (टाइमर सेट करें), यदि माउस उसमें स्थानांतरित हो गया है। 5 सेकंड (यानी माउस स्थिति माउसअप पर जो कुछ है उससे अलग है) तो मान लें गति थी और इसे एनिमेट किया गया।

आपको सबसे अच्छा महसूस करने के लिए .5 सेकंड के साथ खेलने की आवश्यकता हो सकती है।

Answer 2

क्या आप देखना चाहते हैं कि आगे बढ़ना जारी रखें और धीरे-धीरे रुको, है ना?

आपको बस इतना करना है कि यह माउसअप ईवेंट से पहले कितनी तेजी से आगे बढ़ रहा था, फिर गति को आधा सेकेंड या उससे अधिक की वृद्धि में कम करें। यदि यह बटन नीचे नहीं है तो माउस अप्रासंगिक होना चाहिए या नहीं।

एक बार जब आप "गेंद को जाने दें" तो यह कितना तेज़ हो जाता है कि आपका हाथ आगे क्या करता है इसके साथ कुछ भी नहीं करना है।

तो, बटन दबाए जाने पर आपको माउस की गति को ट्रैक करने की आवश्यकता है, फिर बटन चालू होने के बाद बस "फीका" करें।

आपके मामले में, यदि बटन जारी होने पर माउस हिल नहीं रहा था, तो समानता यह है कि उपयोगकर्ता ने "गेंद पर रखा" है। तो इसे सीधे बंद करना चाहिए।

तो आपको उस स्थिति को संभालने के लिए कुछ भी करने की आवश्यकता नहीं है। यदि उपयोगकर्ता बटन को नीचे बटन से रोकता है, तो पैनिंग रोकें।