Detect Touch Swipe Events In jQuery - Event Swipe

File Size: 354 KB
Views Total: 3674
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Detect Touch Swipe Events In jQuery - Event Swipe

Event Swipe is a small touch event detection plugin for jQuery that attaches event handler functions for swipe events to a specific element.

Use this plugin to detect touch swipe events on elements without the need of jQuery mobile library.

Supported Swipe Events:

  • Swipe Up
  • Swipe Down
  • Swipe Left
  • Swipe Right
  • Swipe All

How to use it:

1. Import both jQuery and the jQuery Event Swipe package.

let $ = require('jquery');
let swipeSettingsManager = require('./index.js');

2. Detect events on an element you specify.

$(element).on("swipe.up", (e) => {
  // do something
});

$(element).on("swipe.down", (e) => {
  // do something
});

$(element).on("swipe.left", (e) => {
  // do something
});

$(element).on("swipe.down", (e) => {
  // do something
});

$(element).on("swipe.all", (e) => {
  // do something
});

3. Config the Event Swipe plugin by overring the following parameters .

swipeSettingsManager({

  // How many pixels need to be travelled at a minimum to count as a swipe and not a tap
  threshold: 50,

  // Maximum numbers of pixels that can be travelled at an a perpendicular direction that it can still be counted as a swipe and not a scroll.
  restraint: 200,

  // Maximum time in milliseconds for a swipe to complete. Otherwise it may be a slow scroll.
  allowedTime: 300
  
});

This awesome jQuery plugin is developed by tschallacka. For more Advanced Usages, please check the demo page or visit the official website.