How To Use Jquery Swipe Without Any Library?

I need to create jQuery mobile like Swipe gestures $('#slider ul li div').swipeleft(); using core jQuery without using any library or plugins not even jQuery mobile. I know that jQ

Solution 1:

This is the code for touch swipe using javascript. Finally I found it hard by searching all over the internet. Thanks to padilicious.Below is the HTML code for slider.

<divid="slider"ontouchstart="touchStart(event,'slider');"ontouchend="touchEnd(event);"ontouchmove="touchMove(event);"ontouchcancel="touchCancel(event);"><ulid="slideul"><li><imgsrc="1.jpg"></li><li>....</ul></div>

Below is the javascript code for the touch swipe. It's bit long. But it works for me. You don't have to change anything. Only place you have to change is processingRoutine() function. I've called 2 slide function i.e previous & next using this code sliders.goToNext() & sliders.goToPrev(). You can modify as you want..

var triggerElementID = null; // this variable is used to identity the triggering elementvar 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 swipevar 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);">functiontouchStart(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 usedif ( 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 canceltouchCancel(event);
    }
}

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

functiontouchEnd(event) {
    event.preventDefault();
    // check to see if more than one finger was used and that there is an ending coordinateif ( 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 actionif ( swipeLength >= minLength ) {
            caluculateAngle();
            determineSwipeDirection();
            processingRoutine();
            touchCancel(event); // reset the variables
        } else {
            touchCancel(event);
        }   
    } else {
        touchCancel(event);
    }
}

functiontouchCancel(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;
}

functioncaluculateAngle() {
    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 pixelsvar r = Math.atan2(Y,X); //angle in radians (Cartesian system)
    swipeAngle = Math.round(r*180/Math.PI); //angle in degreesif ( swipeAngle < 0 ) { swipeAngle =  360 - Math.abs(swipeAngle); }
}

functiondetermineSwipeDirection() {

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

functionprocessingRoutine() {
    var swipedElement = document.getElementById(triggerElementID);
    if ( swipeDirection == 'left' ) {
        sliders.goToNext();         
    } elseif ( swipeDirection == 'right' ) {
        sliders.goToPrev();
    } elseif ( swipeDirection == 'up' ) {
        sliders.goToPrev();         
    } elseif ( swipeDirection == 'down' ) {
        sliders.goToNext();         
    }
}