add grid option; Fixes #20

README.md

@@ -42,6 +42,16 @@ containment: '#container'
 
 Contains movement to the bounds of the element. If `true`, the container will be the parent element.
 
+### grid
+
+**Type:** _Array_
+
+``` js
+grid: [ 20, 20 ]
+```
+
+Snaps the element to a grid, every x and y pixels. The array must be of the form `[ x, y ]`.
+
 ### handle
 
 **Type:** Selector _String_

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "draggabilly",
   "main": "draggabilly.js",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "make that shiz draggable",
   "dependencies": {
     "classie": "desandro/classie",

draggabilly.js

@@ -1,5 +1,5 @@
 /*!
- * Draggabilly v1.0.7
+ * Draggabilly v1.0.8
  * Make that shiz draggable
  * http://draggabilly.desandro.com
  */
@@ -105,7 +105,6 @@ function Draggabilly( element, options ) {
   extend( this.options, options );
 
   this._create();
-
 }
 
 // inherit EventEmitter methods
@@ -385,24 +384,43 @@ Draggabilly.prototype.ontouchmove = function( event ) {
 Draggabilly.prototype.dragMove = function( event, pointer ) {
 
   setPointerPoint( this.dragPoint, pointer );
-  this.dragPoint.x -= this.startPoint.x;
-  this.dragPoint.y -= this.startPoint.y;
+  var dragX = this.dragPoint.x - this.startPoint.x;
+  var dragY = this.dragPoint.y - this.startPoint.y;
+
+  var grid = this.options.grid;
+  var gridX = grid && grid[0];
+  var gridY = grid && grid[1];
+
+  dragX = applyGrid( dragX, gridX );
+  dragY = applyGrid( dragY, gridY );
 
   if ( this.options.containment ) {
     var relX = this.relativeStartPosition.x;
     var relY = this.relativeStartPosition.y;
-    this.dragPoint.x = Math.max( this.dragPoint.x, -relX );
-    this.dragPoint.y = Math.max( this.dragPoint.y, -relY );
-    this.dragPoint.x = Math.min( this.dragPoint.x, this.containerSize.width - relX - this.size.width );
-    this.dragPoint.y = Math.min( this.dragPoint.y, this.containerSize.height - relY - this.size.height );
+    var minX = applyGrid( -relX, gridX, 'ceil' );
+    var minY = applyGrid( -relY, gridY, 'ceil' );
+    var maxX = this.containerSize.width - relX - this.size.width;
+    var maxY = this.containerSize.height - relY - this.size.height;
+    maxX = applyGrid( maxX, gridX, 'floor' );
+    maxY = applyGrid( maxY, gridY, 'floor' );
+    dragX = Math.min( maxX, Math.max( minX, dragX ) );
+    dragY = Math.min( maxY, Math.max( minY, dragY ) );
   }
 
-  this.position.x = this.startPosition.x + this.dragPoint.x;
-  this.position.y = this.startPosition.y + this.dragPoint.y;
+  this.position.x = this.startPosition.x + dragX;
+  this.position.y = this.startPosition.y + dragY;
+  // set dragPoint properties
+  this.dragPoint.x = dragX;
+  this.dragPoint.y = dragY;
 
   this.emitEvent( 'dragMove', [ this, event, pointer ] );
 };
 
+function applyGrid( value, grid, method ) {
+  method = method || 'round';
+  return grid ? Math[ method ]( value / grid ) * grid : value;
+}
+
 
 // ----- end event ----- //
 

index.html

@@ -79,6 +79,24 @@
       padding: 10px;
     }
 
+    #grid-container {
+      width: 340px;
+      height: 210px;
+      position: absolute;
+      left: 400px;
+      top: 300px;
+      border: 1px solid;
+    }
+
+    #grid-container .draggie {
+      position: relative;
+      left: 30px;
+      top: 30px;
+      width: 80px;
+      height: 80px;
+      background: #CCC;
+    }
+
   </style>
 
 </head>
@@ -118,6 +136,9 @@ <h1>Draggabilly</h1>
     <img src="http://placekitten.com/60/40" />
   </div>
 
+  <div id="grid-container">
+    <div class="draggie"></div>
+  </div>
 
 <script src="bower_components/eventEmitter/EventEmitter.js"></script>
 <script src="bower_components/eventie/eventie.js"></script>
@@ -190,6 +211,13 @@ <h1>Draggabilly</h1>
     new Draggabilly( elem );
   })();
 
+  ( function() {
+    new Draggabilly( '#grid-container .draggie', {
+      containment: true,
+      grid: [ 50, 50 ]
+    });
+  })();
+
 };
 </script>