Skip to content

Commit ea77ae5

Browse files
committed
Added pressThreshold prop
1 parent 875c7b6 commit ea77ae5

File tree

2 files changed

+5
-3
lines changed

2 files changed

+5
-3
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ There are already a number of great Drag & Drop libraries out there (for instanc
9999
| helperClass | String | | You can provide a class you'd like to add to the sortable helper to add some styles to it |
100100
| transitionDuration | Number | `300` | The duration of the transition when elements shift positions. Set this to `0` if you'd like to disable transitions |
101101
| 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. |
102+
| pressThreshold | Number | `5` | Number of pixels to to tolerate movement before ignoring a press event. |
102103
| 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. |
103104
| 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`. |
104105
| onSortStart | Function | | Callback that get's invoked when sorting begins. `function({node, index, collection}, event)` |

src/SortableContainer/index.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
3939
axis: 'y',
4040
transitionDuration: 300,
4141
pressDelay: 0,
42+
pressThreshold: 5,
4243
distance: 0,
4344
useWindowAsScrollContainer: false,
4445
hideSortableGhost: true,
@@ -191,7 +192,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
191192
};
192193

193194
handleMove = e => {
194-
const {distance} = this.props;
195+
const {distance, pressThreshold} = this.props;
195196

196197
if (!this.state.sorting && this._touched) {
197198
this._delta = {
@@ -200,10 +201,10 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
200201
};
201202
const delta = Math.abs(this._delta.x) + Math.abs(this._delta.y);
202203

203-
if (!distance) {
204+
if (!distance && (!pressThreshold || pressThreshold && delta >= pressThreshold)) {
204205
clearTimeout(this.cancelTimer);
205206
this.cancelTimer = setTimeout(this.cancel, 0);
206-
} else if (delta >= distance) {
207+
} else if (distance && delta >= distance) {
207208
this.handlePress(e);
208209
}
209210
}

0 commit comments

Comments
 (0)