From e74baf559307e5d1a7142e1932f930b310f86470 Mon Sep 17 00:00:00 2001 From: clauderic Date: Thu, 9 Mar 2017 00:00:29 -0500 Subject: [PATCH] Added pressThreshold prop --- README.md | 1 + src/SortableContainer/index.js | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 997a669f4..026c960b3 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,7 @@ There are already a number of great Drag & Drop libraries out there (for instanc | helperClass | String | | You can provide a class you'd like to add to the sortable helper to add some styles to it | | transitionDuration | Number | `300` | The duration of the transition when elements shift positions. Set this to `0` if you'd like to disable transitions | | pressDelay | Number | `0` | If you'd like elements to only become sortable after being pressed for a certain time, change this property. A good sensible default value for mobile is `200`. Cannot be used in conjunction with the `distance` prop. | +| pressThreshold | Number | `5` | Number of pixels to to tolerate movement before ignoring a press event. | | distance | Number | `0` | If you'd like elements to only become sortable after being dragged a certain number of pixels. Cannot be used in conjunction with the `pressDelay` prop. | | shouldCancelStart | Function | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L34) | This function get's invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an `input`, `textarea`, `select` or `option`. | | onSortStart | Function | | Callback that get's invoked when sorting begins. `function({node, index, collection}, event)` | diff --git a/src/SortableContainer/index.js b/src/SortableContainer/index.js index d4e4e42c4..30072cad5 100644 --- a/src/SortableContainer/index.js +++ b/src/SortableContainer/index.js @@ -39,6 +39,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f axis: 'y', transitionDuration: 300, pressDelay: 0, + pressThreshold: 5, distance: 0, useWindowAsScrollContainer: false, hideSortableGhost: true, @@ -191,7 +192,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f }; handleMove = e => { - const {distance} = this.props; + const {distance, pressThreshold} = this.props; if (!this.state.sorting && this._touched) { this._delta = { @@ -200,10 +201,10 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f }; const delta = Math.abs(this._delta.x) + Math.abs(this._delta.y); - if (!distance) { + if (!distance && (!pressThreshold || pressThreshold && delta >= pressThreshold)) { clearTimeout(this.cancelTimer); this.cancelTimer = setTimeout(this.cancel, 0); - } else if (delta >= distance) { + } else if (distance && delta >= distance) { this.handlePress(e); } }