From 446627298d3df79111c13d73193dd70260aa5c48 Mon Sep 17 00:00:00 2001 From: sp-kilobug Date: Sun, 4 Oct 2015 20:09:52 +0200 Subject: [PATCH 1/4] "distance" option An attempt to implement the "distance" option (like http://api.jqueryui.com/sortable/#option-distance). This is useful when your sortable element is also clickable. This prevents the drag to begin due to a micro-movement when you click. --- Sortable.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/Sortable.js b/Sortable.js index d767780..d3b102e 100644 --- a/Sortable.js +++ b/Sortable.js @@ -323,6 +323,9 @@ nextEl = dragEl.nextSibling; activeGroup = options.group; + this._lastX = evt.clientX; + this._lastY = evt.clientY; + dragStartFn = function () { // Delayed drag has been triggered // we can re-enable the events: touchmove/mousemove @@ -463,6 +466,15 @@ _onTouchMove: function (/**TouchEvent*/evt) { + + if (this.options.distance && this.options.distance > 0) { + // sorting will not start until mouse is dragged at a minimum distance + // this is used to prevent unwanted move during a simple click on a sortable element + if (!Sortable.active && !(Math.abs(evt.clientX - this._lastX) > this.options.distance || Math.abs(evt.clientY - this._lastY) > this.options.distance)) { + return; + } + } + if (tapEvt) { // only set the status to dragging, when we are actually dragging if (!Sortable.active) { From 918501cd57a4e267e9ab2f5a1708ef5bd39f7892 Mon Sep 17 00:00:00 2001 From: sp-kilobug Date: Mon, 5 Oct 2015 21:31:27 +0200 Subject: [PATCH 2/4] "distance" option, touch --- Sortable.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/Sortable.js b/Sortable.js index d3b102e..32143a8 100644 --- a/Sortable.js +++ b/Sortable.js @@ -323,8 +323,8 @@ nextEl = dragEl.nextSibling; activeGroup = options.group; - this._lastX = evt.clientX; - this._lastY = evt.clientY; + this._lastX = (touch||evt).clientX; + this._lastY = (touch||evt).clientY; dragStartFn = function () { // Delayed drag has been triggered @@ -466,16 +466,18 @@ _onTouchMove: function (/**TouchEvent*/evt) { + if (tapEvt) { - if (this.options.distance && this.options.distance > 0) { - // sorting will not start until mouse is dragged at a minimum distance - // this is used to prevent unwanted move during a simple click on a sortable element - if (!Sortable.active && !(Math.abs(evt.clientX - this._lastX) > this.options.distance || Math.abs(evt.clientY - this._lastY) > this.options.distance)) { - return; + var touch = evt.touches ? evt.touches[0] : evt; + + if (this.options.distance && this.options.distance > 0) { + // sorting will not start until mouse is dragged at a minimum distance + // this is used to prevent unwanted move during a simple click on a sortable element + if (!Sortable.active && !(Math.abs(touch.clientX - this._lastX) > this.options.distance || Math.abs(touch.clientY - this._lastY) > this.options.distance)) { + return; + } } - } - if (tapEvt) { // only set the status to dragging, when we are actually dragging if (!Sortable.active) { this._dragStarted(); @@ -484,8 +486,7 @@ // 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)'; From 019fc1a32b20736bbd63b450d2be2335ad34ff52 Mon Sep 17 00:00:00 2001 From: sp-kilobug Date: Tue, 6 Oct 2015 09:18:09 +0200 Subject: [PATCH 3/4] "distance" option refactored --- Sortable.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/Sortable.js b/Sortable.js index 32143a8..800a74e 100644 --- a/Sortable.js +++ b/Sortable.js @@ -470,16 +470,13 @@ var touch = evt.touches ? evt.touches[0] : evt; - if (this.options.distance && this.options.distance > 0) { - // sorting will not start until mouse is dragged at a minimum distance - // this is used to prevent unwanted move during a simple click on a sortable element - if (!Sortable.active && !(Math.abs(touch.clientX - this._lastX) > this.options.distance || Math.abs(touch.clientY - this._lastY) > this.options.distance)) { - return; - } - } - // 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) { + return; + } + } this._dragStarted(); } From 45c327bdeebc910760297ee53e2ab18e48f33d66 Mon Sep 17 00:00:00 2001 From: sp-kilobug Date: Wed, 14 Oct 2015 23:25:56 +0200 Subject: [PATCH 4/4] 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; } }