jQuery Plugin To Create Touch-enabeld Moveable Elements - elementMove.js

File Size: 247 KB
Views Total: 379
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Touch-enabeld Moveable Elements - elementMove.js

elementMove.js is a simple jQuery plugin which makes any DOM elements movable with support for touch events, momentum movement and callbacks.

Basic usage:

1. To get started, you need to include both jQuery library and the jQuery elementMove.js plugin on your html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/elementMove.js"></script>

2. Call the function on the element to make it movable.

('.movableElement').elementMove();

3. Config the movement behaviors with the following options.

('.movableElement').elementMove({

  // returns to start position after release
  backToOrigin: false,

  // CSS transition used for this effect
  backToOriginAnimation: 'cubic-bezier(0.39, 0.58, 0.54, 1.42)',

  // animation time
  backToOriginAnimationDuration: 0.5,

  //0 : x, 1 : y, 2 : full, 3 : up, 4 : down, 5 : right, 6 : left  
  swipeDirection: 2, 

  // enable momentum movement
  momentum: false,

  // When you scroll past this value on the x-axis, scrollAmountCallback will fire.
  xScrollAmount: 1,

  // When you scroll past this value on the y-axis, scrollAmountCallback will fire.
  yScrollAmount: 1,

  // callbacks
  scrollAmountCallback: function() {},
  moveCallback: function() {},
  endCallback: function() {}
  
});

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