Merge pull request #590 from sp-kilobug/spk-patch7

"distance" option

README.md

@@ -69,6 +69,7 @@ var sortable = new Sortable(el, {
 	forceFallback: false,  // ignore the HTML5 DnD behaviour and force the fallback to kick in
 	fallbackClass: "sortable-fallback"  // Class name for the cloned DOM Element when using forceFallback
 	fallbackOnBody: false  // Appends the cloned DOM Element into the Document's Body
+	fallbackTolerance: 0 // Specify in pixels how far the mouse should move before it's considered as a drag.        
 	
 	scroll: true, // or HTMLElement
 	scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
@@ -298,6 +299,19 @@ Demo: http://jsbin.com/pucurizace/edit?html,css,js,output
 ---
 
 
+#### `fallbackTolerance` option
+Emulates the native drag threshold. Specify in pixels how far the mouse should move before it's considered as a drag.
+Useful if the items are also clickable like in a list of links.
+
+When the user clicks inside a sortable element, it's not uncommon for your hand to move a little between the time you press and the time you release.  
+Dragging only starts if you move the pointer past a certain tolerance, so that you don't accidentally start dragging every time you click.
+
+3 to 5 are probably good values.
+
+
+---
+
+
 #### `scroll` option
 If set to `true`, the page (or sortable-area) scrolls when coming to an edge.
 

Sortable.js

@@ -209,7 +209,8 @@
 			delay: 0,
 			forceFallback: false,
 			fallbackClass: 'sortable-fallback',
-			fallbackOnBody: false
+			fallbackOnBody: false,
+			fallbackTolerance: 0
 		};
 
 
@@ -321,6 +322,9 @@
 				nextEl = dragEl.nextSibling;
 				activeGroup = options.group;
 
+				this._lastX = (touch || evt).clientX;
+				this._lastY = (touch || evt).clientY;
+
 				dragStartFn = function () {
 					// Delayed drag has been triggered
 					// we can re-enable the events: touchmove/mousemove
@@ -465,16 +469,23 @@
 
 		_onTouchMove: function (/**TouchEvent*/evt) {
 			if (tapEvt) {
+
+				var	touch = evt.touches ? evt.touches[0] : evt;
+
 				// only set the status to dragging, when we are actually dragging
 				if (!Sortable.active) {
+					if (this.options.fallbackTolerance) {
+						if (Math.min(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < this.options.fallbackTolerance) {
+							return;
+						}
+					}
 					this._dragStarted();
 				}
 
 				// as well as creating the ghost element on the document body
 				this._appendGhost();
 
-				var touch = evt.touches ? evt.touches[0] : evt,
-					dx = touch.clientX - tapEvt.clientX,
+				var dx = touch.clientX - tapEvt.clientX,
 					dy = touch.clientY - tapEvt.clientY,
 					translate3d = evt.touches ? 'translate3d(' + dx + 'px,' + dy + 'px,0)' : 'translate(' + dx + 'px,' + dy + 'px)';