Detects Swipe Left, Right, Top And Down - SwipeHandler

Detects Swipe Left, Right, Top And Down - SwipeHandler
File Size: 75.3 KB
Views Total: 360
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A jQuery based swipe event handler that makes it possible to detect Swipe Left, Right, Top And Down events on a specific container.

See Also:

How to use it:

1. Download the package and load the compiled JavaScript jquerySwipeHandler.js from the dist folder.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquerySwipeHandler.js"></script>

2. Call the function on the target element and define which swipe events you want to detect:

  • jquerySwipeHandler.SWIPE_LEFT
  • jquerySwipeHandler.SWIPE_RIGHT
  • jquerySwipeHandler.SWIPE_DOWN
  • jquerySwipeHandler.SWIPE_UP
  • jquerySwipeHandler.CLICK
<div id="container">
  Detects swipe left, right, top and down and blocks scroll
</div>

<div id="container2">
  Detects swipe left and right and allows scroll
</div>
jquerySwipeHandler.handleSwipe("#container", [
  jquerySwipeHandler.SWIPE_LEFT, 
  jquerySwipeHandler.SWIPE_RIGHT, 
  jquerySwipeHandler.SWIPE_DOWN, 
  jquerySwipeHandler.SWIPE_UP, 
  jquerySwipeHandler.CLICK
], function (direction) {
  console.log("swipe: ", direction);
});

jquerySwipeHandler.handleSwipe("#container2", [
  jquerySwipeHandler.SWIPE_LEFT, 
  jquerySwipeHandler.SWIPE_RIGHT, 
  jquerySwipeHandler.CLICK
], function (direction) {
  console.log("swipe2: ", direction);
});

Changelog:

2020-07-17

  • preventing click detection for right mouse

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