jQuery Plugin To Handle Mouse Drag and Touch Events - Simple Swipe

File Size: 6.36 KB
Views Total: 2963
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Handle Mouse Drag and Touch Events - Simple Swipe

Simple Swipe is a very simple jQuery plugin for handling mouse drag or touch swipe events that allows you to add / remove CSS classes or execute a callback as you move a DOM element.

How to use it:

1. Add jQuery library and the jQuery simple swipe plugin to your html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="jquery.simple.swipe.js"></script>

2. Call the plugin on the target element as follow.

$('.container').simpleSwipe({
  // options here
});

3. Default plugin options.

$('.container').simpleSwipe({

  // add the following CSS class to target element when you dragging or swiping.
  draggingClass: 'is-dragging',

  // add the following CSS class to target element when event completed.
  dragClass: 'is-draggable',

  // movable?
  move: true,
  moveX: true,
  moveY: true,

  // callback function
  onComplete: function(){},

  // move back to position where element was
  moveBack: false
  
});

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