From 45c327bdeebc910760297ee53e2ab18e48f33d66 Mon Sep 17 00:00:00 2001 From: sp-kilobug Date: Wed, 14 Oct 2015 23:25:56 +0200 Subject: [PATCH] simplified + renamed to fallbackTolerance + description in README --- README.md | 14 ++++++++++++++ Sortable.js | 11 ++++++----- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 91aed93..87feda4 100644 --- a/README.md +++ b/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. @@ -293,6 +294,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. diff --git a/Sortable.js b/Sortable.js index 800a74e..eb8882d 100644 --- a/Sortable.js +++ b/Sortable.js @@ -209,7 +209,8 @@ delay: 0, forceFallback: false, fallbackClass: 'sortable-fallback', - fallbackOnBody: false + fallbackOnBody: false, + fallbackTolerance: 0 }; @@ -323,8 +324,8 @@ nextEl = dragEl.nextSibling; activeGroup = options.group; - this._lastX = (touch||evt).clientX; - this._lastY = (touch||evt).clientY; + this._lastX = (touch || evt).clientX; + this._lastY = (touch || evt).clientY; dragStartFn = function () { // Delayed drag has been triggered @@ -472,8 +473,8 @@ // only set the status to dragging, when we are actually dragging if (!Sortable.active) { - if (this.options.distance && this.options.distance > 0) { // #590 - if (Math.abs(touch.clientX - this._lastX) < this.options.distance && Math.abs(touch.clientY - this._lastY) < this.options.distance) { + if (this.options.fallbackTolerance) { + if (Math.min(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < this.options.fallbackTolerance) { return; } }