jQuery Simple Swipe (only 3 KB)

a lightweight jQuery plugin for mouse drag and mobile touch events

Usage:

$('.selector').simpleSwipe({     onComplete: function(direction){         console.log(direction); // left | right | up | down     } });

Demo:

http://habibhadi.com/lab/jQuery-simple-swipe/

Using bower?

bower install simple-swipe --save-dev 

Options:

draggingClass:      'is-dragging', dragClass:          'is-draggable', move:               true, moveX:              true, moveY:              true, onComplete:         function(direction){}, moveBack:           false

draggingClass

default: 'is-dragging'

When you swipe/ drag this class will add and automatically remove when event completed.

dragClass

default: 'is-draggable'

This call add when you initialize the plugin

move

default: true

true: draggable element moves with mouse move false: draggable element doesn't move but it triggers all other events

moveX

default: true

true: moves to x axis false: doesn't moves to x axis

moveY

default: true

true: moves to y axis false: doesn't moves to y axis

moveBack

default: false

true: move back to position where element was false: doesn't moves back to old position

onComplete

its an callback function

It gives you swipe event or mouse move direction

onComplete: function(direction){     console.log(direction); }

Advance usage

$('.selector').simpleSwipe({     draggingClass: 'is-dragging',     dragClass: 'is-draggable',     move: true,     moveX: true,     moveY: true,     onComplete: function(direction){         console.log(direction);     },     moveBack: true });

For animate use following css:

.is-draggable {     transition: transform 250ms ease-in; }  .is-dragging {     transition-property: none !important;     cursor: move !important;     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     user-select: none; }