If you want to swipe on touch devices like iPad, iPhone, Android device etc there is a jQuery plugin that can be used for this purpose. It can read any single or multiple finger swipes on touch device and mouse 'drags' on the desktop browser.
You can also set time and distance thresholds to distinguish between swipe gesture and slow drag. It provides page scrolling or page zooming that depends on configuration.
It works as follows:
- It can check swipes in four directions, "up", "down", "left" and "right"
- It can check pinches "in" and "out"
- It can detect both single or double finger touch events on device
- It has click events on the touchSwipe object and also on its child objects
- It has threshold that can be defined to check when a gesture is a swipe
- It has swipe events triggered like "start","move","end" and "cancel"
- It has end event that can be triggered when touch is released, or threshold matches
- It has swiping and page scrolling by user
- It can disable user input elements like Button, form, text etc from triggering swipes
Installation:
You can add this js file to your project:
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
or run the following command to install:
NPM
npm install jquery-touchswipe --save
Bower
bower install jquery-touchswipe --save
Using Plugin:
$(function() {
$("#test").swipe( {
//Generic swipe handler for all directions
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
$(this).text("You swiped " + direction );
}
});
//Set some options later
$("#test").swipe( {fingers:2} );
});
We can also add only particular handler that is only triggered in a particular direction: swipeLeft, swipeRight, swipeUp, swipeDown, that has passed these arguments; event, direction, distance, duration, fingerCount.
$("#swipe").swipe({
swipeLeft:function(event, direction, distance, duration, fingerCount) {
//This only fires when the user swipes left
}
});
Distance Threshold
threshold is minimum distance, the default is 75px. It is to ensure gesture of swipe. If user has moved the finger less than this threshold then swipe handler will not work.
$("#threshold").swipe({
swipe:function(event, direction, distance, duration, fingerCount){
$(this).text("You swiped " + direction + " for " + distance + "px" );
},
threshold:100
});
You can also restrict swipe according to the touch on 1,2,3 or all fingers.
$("#fingers").swipe({
swipe:function(event, direction, distance, duration, fingerCount){
$(this).text("You swiped " + direction + " with " + fingerCount + " fingers" );
},
fingers:'all'
});
0 Comment(s)