वेब पेज पर बाएं/दाएं स्वाइप करें, लेकिन डिफ़ॉल्ट स्वाइप अप/डाउन

Question

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

padilicious कोड की धारा है कि मैं गया है

function processingRoutine() { 
    var swipedElement = document.getElementById(triggerElementID); 
    if (swipeDirection == 'left') { 
     document.location = document.getElementById('nextPage').href; 
    } else if (swipeDirection == 'right') { 
     document.location = document.getElementById('prevPage').href; 
    } else if (swipeDirection == 'up') { 
     return; 
    } else if (swipeDirection == 'down') { 
     return; 
    } 


} 

Answer 1

सभी कार्यों से event.preventDefault(); हटाएं। फ़ंक्शन processingRoutine() {} में आप जो चाहते हैं उसके लिए event.preventDefault(); जोड़ें।

function processingRoutine() { 
    var swipedElement = document.getElementById(triggerElementID); 
    if (swipeDirection == 'left') { 
     // REPLACE WITH YOUR ROUTINES 
     //swipedElement.style.backgroundColor = 'orange'; 
     event.preventDefault(); 
    } else if (swipeDirection == 'right') { 
     // REPLACE WITH YOUR ROUTINES 
     //swipedElement.style.backgroundColor = 'green'; 
     event.preventDefault(); 
    } else if (swipeDirection == 'up') { 
     // REPLACE WITH YOUR ROUTINES 
     //swipedElement.style.backgroundColor = 'maroon'; 
    } else if (swipeDirection == 'down') { 
     // REPLACE WITH YOUR ROUTINES 
     //swipedElement.style.backgroundColor = 'purple'; 
    } 
} 

Answer 2

मैं padilicious से परिचित नहीं हूँ, लेकिन जाँच करें और यदि ontouchmove="BlockMove(event);" कहीं भी सेट कर दिया जाता देखते हैं, कि स्क्रॉल से पेज को रोकता है जैसे आप का वर्णन है, मुझे यकीन नहीं है कि वर्टिकल स्क्रॉलिंग को रखने के लिए आप इसे कैसे प्राप्त करेंगे लेकिन क्षैतिज रूप से स्वाइप करें।

संपादित करें: मुझे बाद में "मूल" आईओएस वेब ऐप्स महसूस करने के लिए वास्तव में एक उपयोगी अवलोकन मिला है, यह शायद वही नहीं हो सकता है जो आप खोज रहे हैं, लेकिन आपको अपने दृष्टिकोण का एक और तरीका प्रदान कर सकता है मुसीबत। इसे देखें: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Answer 3

वहाँ एक jQuery पुस्तकालय है, जो काम (/ नीचे तरीकों अप प्रदान नहीं द्वारा) करता है: http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture

Answer 4

Padilicious सभी मामलों में डिफ़ॉल्ट रोकने जा रहा है। सभी मामलों में event.preventDefault() पर कॉल देखें।

function touchStart(event,passedName) { 
    // disable the standard ability to select the touched object 
    event.preventDefault(); 

आपको स्टार्ट, स्टॉप, ... हैंडलर को ऊपर और नीचे मामलों में preventDefault() को कॉल न करने के लिए बदलना होगा।

Answer 5

मैं स्क्रिप्ट इस काम बदल गया है,:

// TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT 
// Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM 

// this script can be used with one or more page elements to perform actions based on them being swiped with a single finger 

var triggerElementID = null; // this variable is used to identity the triggering element 
var fingerCount = 0; 
var startX = 0; 
var startY = 0; 
var curX = 0; 
var curY = 0; 
var deltaX = 0; 
var deltaY = 0; 
var horzDiff = 0; 
var vertDiff = 0; 
var minLength = 72; // the shortest distance the user may swipe 
var swipeLength = 0; 
var swipeAngle = null; 
var swipeDirection = null; 

// The 4 Touch Event Handlers 

// NOTE: the touchStart handler should also receive the ID of the triggering element 
// make sure its ID is passed in the event call placed in the element declaration, like: 
// <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);"> 

function touchStart(event,passedName) { 
    // disable the standard ability to select the touched object 
    //event.preventDefault(); 
    // get the total number of fingers touching the screen 
    fingerCount = event.touches.length; 
    // since we're looking for a swipe (single finger) and not a gesture (multiple fingers), 
    // check that only one finger was used 
    if (fingerCount == 1) { 
     // get the coordinates of the touch 
     startX = event.touches[0].pageX; 
     startY = event.touches[0].pageY; 
     // store the triggering element ID 
     triggerElementID = passedName; 
    } else { 
     // more than one finger touched so cancel 
     touchCancel(event); 
    } 
} 

function touchMove(event) { 
    //event.preventDefault(); 
    if (event.touches.length == 1) { 
     curX = event.touches[0].pageX; 
     curY = event.touches[0].pageY; 
    } else { 
     touchCancel(event); 
    } 
} 

function touchEnd(event) { 
    //event.preventDefault(); 
    // check to see if more than one finger was used and that there is an ending coordinate 
    if (fingerCount == 1 && curX != 0) { 
     // use the Distance Formula to determine the length of the swipe 
     swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2))); 
     // if the user swiped more than the minimum length, perform the appropriate action 
     if (swipeLength >= minLength) { 
      caluculateAngle(); 
      determineSwipeDirection(); 
      processingRoutine(); 
      touchCancel(event); // reset the variables 
     } else { 
      touchCancel(event); 
     } 
    } else { 
     touchCancel(event); 
    } 
} 

function touchCancel(event) { 
    // reset the variables back to default values 
    fingerCount = 0; 
    startX = 0; 
    startY = 0; 
    curX = 0; 
    curY = 0; 
    deltaX = 0; 
    deltaY = 0; 
    horzDiff = 0; 
    vertDiff = 0; 
    swipeLength = 0; 
    swipeAngle = null; 
    swipeDirection = null; 
    triggerElementID = null; 
} 

function caluculateAngle() { 
    var X = startX-curX; 
    var Y = curY-startY; 
    var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels 
    var r = Math.atan2(Y,X); //angle in radians (Cartesian system) 
    swipeAngle = Math.round(r*180/Math.PI); //angle in degrees 
    if (swipeAngle < 0) { swipeAngle = 360 - Math.abs(swipeAngle); } 
} 

function determineSwipeDirection() { 
    if ((swipeAngle <= 45) && (swipeAngle >= 0)) { 
     swipeDirection = 'left'; 
    } else if ((swipeAngle <= 360) && (swipeAngle >= 315)) { 
     swipeDirection = 'left'; 
    } else if ((swipeAngle >= 135) && (swipeAngle <= 225)) { 
     swipeDirection = 'right'; 
    } 

    /* else if ((swipeAngle > 45) && (swipeAngle < 135)) { 
     swipeDirection = 'down'; 
    } else { 
     swipeDirection = 'up'; 
    }*/ 
} 

function processingRoutine() { 
    var swipedElement = document.getElementById(triggerElementID); 
    if (swipeDirection == 'left') { 
     // REPLACE WITH YOUR ROUTINES 
     event.preventDefault(); 
     swipedElement.style.backgroundColor = 'orange'; 
    } else if (swipeDirection == 'right') { 
     // REPLACE WITH YOUR ROUTINES 
     event.preventDefault(); 
     swipedElement.style.backgroundColor = 'green'; 
    } 

    /*else if (swipeDirection == 'up') { 
     // REPLACE WITH YOUR ROUTINES 
     swipedElement.style.backgroundColor = 'maroon'; 
    } else if (swipeDirection == 'down') { 
     // REPLACE WITH YOUR ROUTINES 
     swipedElement.style.backgroundColor = 'purple'; 
    }*/ 
}