Triggered when a horizontal drag of 30px or more (and less than 30px vertically) occurs within 1 second duration.
Triggered when a horizontal drag of 30px or more (and less than 30px vertically) occurs within 1 second duration but these can be configured:
-
$.event.special.swipe.scrollSupressionThreshold
(default: 10px) â More than this horizontal displacement, and we will suppress scrolling. -
$.event.special.swipe.durationThreshold
(default: 1000ms) â More time than this, and it isn't a swipe. -
$.event.special.swipe.horizontalDistanceThreshold
(default: 30px) â Swipe horizontal displacement must be more than this. -
$.event.special.swipe.verticalDistanceThreshold
(default: 30px) â Swipe vertical displacement must be less than this.
The swipe event can also be extend to add your own logic or functionality. The following methods can be extended:
-
$.event.special.swipe.start
Default:function( event ) { var data = event.originalEvent.touches ? event.originalEvent.touches[ 0 ] : event; return { time: ( new Date() ).getTime(), coords: [ data.pageX, data.pageY ], origin: $( event.target ) }; }
This method recieves a touchstart event and returns an object of data about the starting location.
-
$.event.special.swipe.stop
Default:function( event ) { var data = event.originalEvent.touches ? event.originalEvent.touches[ 0 ] : event; return { time: ( new Date() ).getTime(), coords: [ data.pageX, data.pageY ] }; }
This method recieves a touchend event and returns an object of data about the ending location.
-
$.event.special.swipe.handleSwipe
Default:function( start, stop ) { if ( stop.time - start.time < $.event.special.swipe.durationThreshold && Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold && Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) { start.origin.trigger( "swipe" ) .trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" ); } }
This method recieves the start and stop objects and handles the logic for and triggering for the swipe events.
jQuery( window ).on( "swipe", function( event ) { ... } )
Examples:
A simple example of the capturing and acting upon a swipe event
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>swipe demo</title> <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <style> html, body { padding: 0; margin: 0; } html, .ui-mobile, .ui-mobile body { height: 105px; } .ui-mobile, .ui-mobile .ui-page { min-height: 105px; } #nav { font-size: 200%; width:17.1875em; margin:17px auto 0 auto; } #nav a { color: #777; border: 2px solid #777; background-color: #ccc; padding: 0.2em 0.6em; text-decoration: none; float: left; margin-right: 0.3em; } #nav a:hover { color: #999; border-color: #999; background: #eee; } #nav a.selected, #nav a.selected:hover { color: #0a0; border-color: #0a0; background: #afa; } div.box { width: 30em; height: 3em; background-color: #108040; } div.box.swipe { background-color: #7ACEF4; } </style> </head> <body> <h3>Swipe the green rectangle to change its color:</h3> <div class="box"></div> <script> $(function(){ // Bind the swipeHandler callback function to the swipe event on div.box $( "div.box" ).on( "swipe", swipeHandler ); // Callback function references the event target and adds the 'swipe' class to it function swipeHandler( event ){ $( event.target ).addClass( "swipe" ); } }); </script> </body> </html>
Please login to continue.