jquery swipe events
a plugin that ads the swipe-left,swipe-right,swipe-up,swipe-down events to jquery
by gion_13
HTML
<div>swipe me</div>
CSS
div{
width : 200px;
height : 200px;
background : blue;
border : 4px dashed green;
margin : 0 auto;
text-align : center;
line-height : 200px;
}
JavaScript
// the jquery plugin that adds swipe-dir as an event to the "bind" method (where dir can be one of left/right/up/down)
// usage : $(selector).bind('swipe-left',function(){console.log("You've just swiped left!");});
// $(selector).unbind('swipe');
(function($){
function swipeDirection(el,handlers,minDistance,fireOncePerTouch){
var h = $.extend({
left : function (e){
return true;
},
right : function (e){
return true;
},
up : function (e){
return true;
},
down : function (e){
return true;
}
},handlers),
minD = typeof minDistance === 'undefined' ? 25 : minDistance,
originalPoint = null;
$(el)
.bind('touchstart.swipeDirection',function(e){
originalPoint = {
x : e.originalEvent.pageX,
y : e.originalEvent.pageY
};
$(el).bind('touchmove.swipeDirection',function(e){
if(!originalPoint)
{
originalPoint = {
x : e.originalEvent.pageX,
y : e.originalEvent.pageY
};
return;
}
var dir,
p = {
x : e.originalEvent.pageX,
y : e.originalEvent.pageY
},
dx = Math.abs(p.x - originalPoint.x),
dy = Math.abs(p.y - originalPoint.y);
if(dx > dy && minD < dx)
{
dir = p.x < originalPoint.x ? "left" : "right";
}
else if(dx < dy && minD < dy)
{
dir =...