2013-05-07 10 views
5

के साथ दिशा और दूरी कैसे प्राप्त करें jQuery मोबाइल स्वाइप ईवेंट का उपयोग करते समय कॉलबैक फ़ंक्शन में दिशा और दूरी प्राप्त करना संभव है? मुझे official docs में इसके बारे में कुछ भी नहीं मिला है।jQuery मोबाइल स्वाइप ईवेंट

TouchSwipe एक अच्छा विकल्प है, लेकिन मुझे tap इवेंट फॉर्म jQuery मोबाइल की आवश्यकता है और मैं दो पुस्तकालयों को शामिल नहीं करना चाहता हूं।

+0

आपको इसके लिए किस प्लेटफॉर्म की आवश्यकता है? – Gajotres

उत्तर

8

उदाहरण कार्य करना: http://jsfiddle.net/Gajotres/K69AJ/

यह उदाहरण jQuery मोबाइल घटनाओं के साथ किया जाता है तो यह केवल jQuery मोबाइल के साथ काम करेंगे। विंडोज और एंड्रॉइड मंच पर परीक्षण किया।

डेस्कटॉप और मोबाइल ब्राउज़र के बीच अंतर को पुल करने के लिए Vmouse ईवेंट बनाए जाते हैं।

event.preventDefault(); 

यह एंड्रॉयड प्लेटफॉर्म के लिए की जरूरत है, मंच स्पर्श आंदोलन का पता लगाने के साथ एक बुरा बग है:

इसके अलावा इस लाइन पर ध्यान दें। बग रिपोर्ट: http://code.google.com/p/android/issues/detail?id=19827

var gnStartX = 0; 
var gnStartY = 0; 
var gnEndX = 0; 
var gnEndY = 0; 

$(document).on('vmousedown', function(event){ 
    gnStartX = event.pageX; 
    gnStartY = event.pageY; 
    event.preventDefault(); 
}); 

$(document).on('vmouseup', function(event){ 
    gnEndX = event.pageX; 
    gnEndY = event.pageY; 
    var distance = Math.ceil(nthroot(Math.pow((gnEndX - gnStartX),2) + Math.pow((gnEndY - gnStartY),2), 2)); 

    if(Math.abs(gnEndX - gnStartX) > Math.abs(gnEndY - gnStartY)) { 
     if(gnEndX > gnStartX) { 
      alert("Swipe Right - Distance " + distance + 'px'); 
     } else { 
      alert("Swipe Left - Distance " + distance + 'px');  
     } 
    } else { 
     if(gnEndY > gnStartY) { 
      alert("Swipe Bottom - Distance " + distance + 'px'); 
     } else { 
      alert("Swipe Top - Distance " + distance + 'px');  
     }   
    } 

    event.preventDefault();  
}); 

function nthroot(x, n) { 
    try { 
    var negate = n % 2 == 1 && x < 0; 
    if(negate) 
     x = -x; 
    var possible = Math.pow(x, 1/n); 
    n = Math.pow(possible, n); 
    if(Math.abs(x - n) < 1 && (x > 0 == n > 0)) 
     return negate ? -possible : possible; 
    } catch(e){} 
} 
+0

+1 विस्तृत उत्तर। – Omar

1

आप hammer.js का भी उपयोग कर सकते हैं। दोनों घटनाएं हैं - स्वाइप करें और टैप करें। Hammer.js में निर्देश और दूरी प्राप्त करना संभव है। टैप इवेंट नए jQuery संस्करणों का हिस्सा भी है - आपको केवल टैप ईवेंट के लिए jquery-mobile को शामिल करने की आवश्यकता नहीं है।

Documentation hammer.js

यह आप के लिए काम करता है आशा है।

संबंधित मुद्दे