Last Updated: February 25, 2016
·
1.157K
· macsdickinson

Simple JQuery 2.x swipe event

$(document).on('mousedown', function (e) {
    var ref = arguments.callee;
    var handle = $(this);
    var startX = e.clientX;
    var startY = e.clientY;
    handle.off('mousedown', ref);
    handle.on('mouseup', function(e) {
      handle.off('mouseup', arguments.callee);
      handle.on('mousedown', ref);
      var endX = e.clientX;
      var endY = e.clientY;
      var distanceX = Math.abs(endX - startX);
      var distanceY = Math.abs(endY - startY);
      if (distanceX > 50) {
        handle.trigger((endX > startX) ? 'swipeRight' : 'swipeLeft');
      }
      if (distanceY > 50) {
        handle.trigger((endY > startY) ? 'swipeDown' : 'swipeUp');
      }
      e.preventDefault();
      return false;
    });
  });

Demo here:
http://jsbin.com/IBiliS/1/edit

1 Response
Add your response

Hi, tried your code on iPad, but it isn't responding to swipes.

over 1 year ago ·