Swipe

Touch Event Capture jQuery Plugin

A plugin to capture swipe and move events on any element of webpage on ipad, iphone, android and other smart phones. Plugin works on all modern browsers on desktop, iphone, ipad, andriod phones and tables.

Examples

Swipe Area

Features

  1. Catch mouse click & drag, mouse swipe
  2. Handle touch, move and swipe events
  3. Works on iphone, ipad, android

How To Use

This script goes into head section

<!-- Include jQuery Library -->
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js" type="text/javascript"> </script>
<!-- Include swipe Library -->
<script src="swipe.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".swipe").swipe({
            PreventDefault: true,
            EnableMouse: true,
            Distance: 100,
            OnTouch: function (detail) {
                $("#touch").html("Touch Details : { clientX : " + detail.client.x + ", clientY : " + detail.client.x + ", pageX : " + detail.page.x + ", pageY : " + detail.page.y + ", screenX : " + detail.screen.x + ", screenY : " + detail.screen.y + "}");
            },
            OnMove: function (detail) {
                $("#move").html("Move Details : { xchange:" + detail.diffx + ", ychange : " + detail.diffy + ", clientX : " + detail.client.x + ", clientY : " + detail.client.x + ", pageX : " + detail.page.x + ", pageY : " + detail.page.y + ", screenX : " + detail.screen.x + ", screenY : " + detail.screen.y + "}");
            },
            OnSwipe: function (detail) {
                $("#swipe").html("Swipe Details : { direction :" + detail.direction + ", distance : " + detail.distance + ", speed : " + detail.speed + ", time: " + detail.time + "}");
            },
            OnEnd: function () { }
        });
    });
</script>

HTML Example

<div class="swipe">
                        Swipe Area
</div>
<div id="touch"></div>
<div id="move"></div>
<div id="swipe"></div>

Usage Options

Option Default Description
PreventDefault true true | false
EnableMouse true true | false

By default library track mouse based touch, move and swipe.
Distance 100 Integer

Swipe function will be called only if distance is greater than set value.
OnTouch null 
function(detail) { 
/*
detail: { client: { x , y }, page: { x, y }, screen: { x, y } }
*/
                        }

client means current clientX and clientY coordinates
page means current pageX and pageY coordinates
screen means current screenX and screenY coordinates

OnMove null 
function(detail) { 
/*
detail : { diffx, diffy, client: { x, y }, page: { x, y }, screen: { x, y } }
*/
                        }

diffx means difference in x from last move
diffy means difference in y from last move
client means current clientX and clientY coordinates
page means current pageX and pageY coordinates
screen means current screenX and screenY coordinates

OnSwipe null 
function(detail) { 
/*
detail: { direction, distance, speed, time }
*/
                        }

direction : 'u' | 'd' | 'l' | 'r'
distance : pixels covered
speed : pixels covered / time
time : time in seconds

OnEnd null function() { }

Called when swipe ends.