Skip to content

Commit befebe7

Browse files
juliangarnierjuliangarnier
authored
Merge pull request #1091 from craig-jennings/craig/add-drag-threshold-parameter
feat: add new 'dragThreshold' option to Draggable
2 parents 0f2b21b + 0135223 commit befebe7

File tree

7 files changed

+65
-11
lines changed

7 files changed

+65
-11
lines changed

‎dist/modules/draggable/draggable.cjs‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ var target = require('../utils/target.cjs');
2626
* DOMTarget,
2727
* DOMTargetSelector,
2828
* DraggableCursorParams,
29+
* DraggableDragThresholdParams,
2930
* TargetsParam,
3031
* DraggableParams,
3132
* EasingFunction,
@@ -156,7 +157,7 @@ class Transforms {
156157
}
157158

158159
/**
159-
* @template {Array<Number>|DOMTargetSelector|String|Number|Boolean|Function|DraggableCursorParams} T
160+
* @template {Array<Number>|DOMTargetSelector|String|Number|Boolean|Function|DraggableCursorParams|DraggableDragThresholdParams} T
160161
* @param {T | ((draggable: Draggable) => T)} value
161162
* @param {Draggable} draggable
162163
* @return {T}
@@ -210,6 +211,8 @@ class Draggable {
210211
/** @type {Number} */
211212
this.dragSpeed = 0;
212213
/** @type {Number} */
214+
this.dragThreshold = 3;
215+
/** @type {Number} */
213216
this.maxVelocity = 0;
214217
/** @type {Number} */
215218
this.minVelocity = 0;
@@ -627,6 +630,16 @@ class Draggable {
627630
if (onHover) cursorStyles.onHover = onHover;
628631
if (onGrab) cursorStyles.onGrab = onGrab;
629632
}
633+
const parsedDragThreshold = parseDraggableFunctionParameter(params.dragThreshold, this);
634+
const dragThreshold = { mouse: 3, touch: 7 };
635+
if (helpers.isNum(parsedDragThreshold)) {
636+
dragThreshold.mouse = parsedDragThreshold;
637+
dragThreshold.touch = parsedDragThreshold;
638+
} else if (parsedDragThreshold) {
639+
const { mouse, touch } = parsedDragThreshold;
640+
if (!helpers.isUnd(mouse)) dragThreshold.mouse = mouse;
641+
if (!helpers.isUnd(touch)) dragThreshold.touch = touch;
642+
}
630643
this.containerArray = helpers.isArr(container) ? container : null;
631644
this.$container = /** @type {HTMLElement} */(container && !this.containerArray ? targets.parseTargets(/** @type {DOMTarget} */(container))[0] : consts.doc.body);
632645
this.useWin = this.$container === consts.doc.body;
@@ -641,6 +654,7 @@ class Draggable {
641654
this.scrollSpeed = values.setValue(parseDraggableFunctionParameter(params.scrollSpeed, this), 1.5);
642655
this.scrollThreshold = values.setValue(parseDraggableFunctionParameter(params.scrollThreshold, this), 20);
643656
this.dragSpeed = values.setValue(parseDraggableFunctionParameter(params.dragSpeed, this), 1);
657+
this.dragThreshold = this.isFinePointer ? dragThreshold.mouse : dragThreshold.touch;
644658
this.minVelocity = values.setValue(parseDraggableFunctionParameter(params.minVelocity, this), 0);
645659
this.maxVelocity = values.setValue(parseDraggableFunctionParameter(params.maxVelocity, this), 50);
646660
this.velocityMultiplier = values.setValue(parseDraggableFunctionParameter(params.velocityMultiplier, this), 1);
@@ -942,8 +956,7 @@ class Draggable {
942956
this.$trigger.addEventListener('touchend', preventDefault);
943957

944958
// Don't check for a miminim distance move if already dragging
945-
if (this.dragged || (!this.disabled[0] && helpers.abs(movedX) > 3) || (!this.disabled[1] && helpers.abs(movedY) > 3)) {
946-
959+
if (this.dragged || (!this.disabled[0] && helpers.abs(movedX) > this.dragThreshold) || (!this.disabled[1] && helpers.abs(movedY) > this.dragThreshold)) {
947960
this.updateTicker.resume();
948961
this.pointer[2] = this.pointer[0];
949962
this.pointer[3] = this.pointer[1];

‎dist/modules/draggable/draggable.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ export class Draggable {
3030
/** @type {Number} */
3131
dragSpeed: number;
3232
/** @type {Number} */
33+
dragThreshold: number;
34+
/** @type {Number} */
3335
maxVelocity: number;
3436
/** @type {Number} */
3537
minVelocity: number;

‎dist/modules/draggable/draggable.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import { globals, scope } from '../core/globals.js';
99
import { doc, win, noop, maxValue, compositionTypes } from '../core/consts.js';
1010
import { parseTargets } from '../core/targets.js';
11-
import { isUnd, isObj, isArr, now, atan2, round, max, snap, clamp, abs, sqrt, cos, sin, isFnc } from '../core/helpers.js';
11+
import { isUnd, isObj, isArr, now, atan2, round, max, snap, clamp, isNum, abs, sqrt, cos, sin, isFnc } from '../core/helpers.js';
1212
import { setValue } from '../core/values.js';
1313
import { mapRange } from '../utils/number.js';
1414
import { Timer } from '../timer/timer.js';
@@ -24,6 +24,7 @@ import { get, set } from '../utils/target.js';
2424
* DOMTarget,
2525
* DOMTargetSelector,
2626
* DraggableCursorParams,
27+
* DraggableDragThresholdParams,
2728
* TargetsParam,
2829
* DraggableParams,
2930
* EasingFunction,
@@ -154,7 +155,7 @@ class Transforms {
154155
}
155156

156157
/**
157-
* @template {Array<Number>|DOMTargetSelector|String|Number|Boolean|Function|DraggableCursorParams} T
158+
* @template {Array<Number>|DOMTargetSelector|String|Number|Boolean|Function|DraggableCursorParams|DraggableDragThresholdParams} T
158159
* @param {T | ((draggable: Draggable) => T)} value
159160
* @param {Draggable} draggable
160161
* @return {T}
@@ -208,6 +209,8 @@ class Draggable {
208209
/** @type {Number} */
209210
this.dragSpeed = 0;
210211
/** @type {Number} */
212+
this.dragThreshold = 3;
213+
/** @type {Number} */
211214
this.maxVelocity = 0;
212215
/** @type {Number} */
213216
this.minVelocity = 0;
@@ -625,6 +628,16 @@ class Draggable {
625628
if (onHover) cursorStyles.onHover = onHover;
626629
if (onGrab) cursorStyles.onGrab = onGrab;
627630
}
631+
const parsedDragThreshold = parseDraggableFunctionParameter(params.dragThreshold, this);
632+
const dragThreshold = { mouse: 3, touch: 7 };
633+
if (isNum(parsedDragThreshold)) {
634+
dragThreshold.mouse = parsedDragThreshold;
635+
dragThreshold.touch = parsedDragThreshold;
636+
} else if (parsedDragThreshold) {
637+
const { mouse, touch } = parsedDragThreshold;
638+
if (!isUnd(mouse)) dragThreshold.mouse = mouse;
639+
if (!isUnd(touch)) dragThreshold.touch = touch;
640+
}
628641
this.containerArray = isArr(container) ? container : null;
629642
this.$container = /** @type {HTMLElement} */(container && !this.containerArray ? parseTargets(/** @type {DOMTarget} */(container))[0] : doc.body);
630643
this.useWin = this.$container === doc.body;
@@ -639,6 +652,7 @@ class Draggable {
639652
this.scrollSpeed = setValue(parseDraggableFunctionParameter(params.scrollSpeed, this), 1.5);
640653
this.scrollThreshold = setValue(parseDraggableFunctionParameter(params.scrollThreshold, this), 20);
641654
this.dragSpeed = setValue(parseDraggableFunctionParameter(params.dragSpeed, this), 1);
655+
this.dragThreshold = this.isFinePointer ? dragThreshold.mouse : dragThreshold.touch;
642656
this.minVelocity = setValue(parseDraggableFunctionParameter(params.minVelocity, this), 0);
643657
this.maxVelocity = setValue(parseDraggableFunctionParameter(params.maxVelocity, this), 50);
644658
this.velocityMultiplier = setValue(parseDraggableFunctionParameter(params.velocityMultiplier, this), 1);
@@ -940,8 +954,7 @@ class Draggable {
940954
this.$trigger.addEventListener('touchend', preventDefault);
941955

942956
// Don't check for a miminim distance move if already dragging
943-
if (this.dragged || (!this.disabled[0] && abs(movedX) > 3) || (!this.disabled[1] && abs(movedY) > 3)) {
944-
957+
if (this.dragged || (!this.disabled[0] && abs(movedX) > this.dragThreshold) || (!this.disabled[1] && abs(movedY) > this.dragThreshold)) {
945958
this.updateTicker.resume();
946959
this.pointer[2] = this.pointer[0];
947960
this.pointer[3] = this.pointer[1];

‎dist/modules/types/index.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,10 @@ export type DraggableCursorParams = {
340340
onHover?: string;
341341
onGrab?: string;
342342
};
343+
export type DraggableDragThresholdParams = {
344+
mouse?: number;
345+
touch?: number;
346+
};
343347
export type DraggableParams = {
344348
trigger?: DOMTargetSelector;
345349
container?: DOMTargetSelector | Array<number> | ((draggable: Draggable) => DOMTargetSelector | Array<number>);
@@ -351,6 +355,7 @@ export type DraggableParams = {
351355
containerFriction?: number | ((draggable: Draggable) => number);
352356
releaseContainerFriction?: number | ((draggable: Draggable) => number);
353357
dragSpeed?: number | ((draggable: Draggable) => number);
358+
dragThreshold?: number | DraggableDragThresholdParams | ((draggable: Draggable) => number | DraggableDragThresholdParams);
354359
scrollSpeed?: number | ((draggable: Draggable) => number);
355360
scrollThreshold?: number | ((draggable: Draggable) => number);
356361
minVelocity?: number | ((draggable: Draggable) => number);

‎examples/draggable-playground/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ const flickDraggable = createDraggable(flickData, {
205205
y: false,
206206
onGrab: () => animate(flickData, { speedX: 0, duration: 500 }),
207207
onRelease: () => animate(flickData, { speedX: 2, duration: 500 }),
208-
releaseStiffness: 10,
208+
releaseDamping: 10,
209209
});
210210

211211
createTimer({

‎src/draggable/draggable.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
sin,
3131
abs,
3232
now,
33+
isNum,
3334
} from '../core/helpers.js';
3435

3536
import {
@@ -75,6 +76,7 @@ import {
7576
* DOMTarget,
7677
* DOMTargetSelector,
7778
* DraggableCursorParams,
79+
* DraggableDragThresholdParams,
7880
* TargetsParam,
7981
* DraggableParams,
8082
* EasingFunction,
@@ -205,7 +207,7 @@ class Transforms {
205207
}
206208

207209
/**
208-
* @template {Array<Number>|DOMTargetSelector|String|Number|Boolean|Function|DraggableCursorParams} T
210+
* @template {Array<Number>|DOMTargetSelector|String|Number|Boolean|Function|DraggableCursorParams|DraggableDragThresholdParams} T
209211
* @param {T | ((draggable: Draggable) => T)} value
210212
* @param {Draggable} draggable
211213
* @return {T}
@@ -259,6 +261,8 @@ export class Draggable {
259261
/** @type {Number} */
260262
this.dragSpeed = 0;
261263
/** @type {Number} */
264+
this.dragThreshold = 3;
265+
/** @type {Number} */
262266
this.maxVelocity = 0;
263267
/** @type {Number} */
264268
this.minVelocity = 0;
@@ -676,6 +680,16 @@ export class Draggable {
676680
if (onHover) cursorStyles.onHover = onHover;
677681
if (onGrab) cursorStyles.onGrab = onGrab;
678682
}
683+
const parsedDragThreshold = parseDraggableFunctionParameter(params.dragThreshold, this);
684+
const dragThreshold = { mouse: 3, touch: 7 };
685+
if (isNum(parsedDragThreshold)) {
686+
dragThreshold.mouse = parsedDragThreshold;
687+
dragThreshold.touch = parsedDragThreshold;
688+
} else if (parsedDragThreshold) {
689+
const { mouse, touch } = parsedDragThreshold;
690+
if (!isUnd(mouse)) dragThreshold.mouse = mouse;
691+
if (!isUnd(touch)) dragThreshold.touch = touch;
692+
}
679693
this.containerArray = isArr(container) ? container : null;
680694
this.$container = /** @type {HTMLElement} */(container && !this.containerArray ? parseTargets(/** @type {DOMTarget} */(container))[0] : doc.body);
681695
this.useWin = this.$container === doc.body;
@@ -690,6 +704,7 @@ export class Draggable {
690704
this.scrollSpeed = setValue(parseDraggableFunctionParameter(params.scrollSpeed, this), 1.5);
691705
this.scrollThreshold = setValue(parseDraggableFunctionParameter(params.scrollThreshold, this), 20);
692706
this.dragSpeed = setValue(parseDraggableFunctionParameter(params.dragSpeed, this), 1);
707+
this.dragThreshold = this.isFinePointer ? dragThreshold.mouse : dragThreshold.touch;
693708
this.minVelocity = setValue(parseDraggableFunctionParameter(params.minVelocity, this), 0);
694709
this.maxVelocity = setValue(parseDraggableFunctionParameter(params.maxVelocity, this), 50);
695710
this.velocityMultiplier = setValue(parseDraggableFunctionParameter(params.velocityMultiplier, this), 1);
@@ -991,8 +1006,7 @@ export class Draggable {
9911006
this.$trigger.addEventListener('touchend', preventDefault);
9921007

9931008
// Don't check for a miminim distance move if already dragging
994-
if (this.dragged || (!this.disabled[0] && abs(movedX) > 3) || (!this.disabled[1] && abs(movedY) > 3)) {
995-
1009+
if (this.dragged || (!this.disabled[0] && abs(movedX) > this.dragThreshold) || (!this.disabled[1] && abs(movedY) > this.dragThreshold)) {
9961010
this.updateTicker.resume();
9971011
this.pointer[2] = this.pointer[0];
9981012
this.pointer[3] = this.pointer[1];

‎src/types/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -573,6 +573,12 @@ export {}
573573
* @property {String} [onGrab]
574574
*/
575575

576+
/**
577+
* @typedef {Object} DraggableDragThresholdParams
578+
* @property {Number} [mouse]
579+
* @property {Number} [touch]
580+
*/
581+
576582
/**
577583
* @typedef {Object} DraggableParams
578584
* @property {DOMTargetSelector} [trigger]
@@ -585,6 +591,7 @@ export {}
585591
* @property {Number|((draggable: Draggable) => Number)} [containerFriction]
586592
* @property {Number|((draggable: Draggable) => Number)} [releaseContainerFriction]
587593
* @property {Number|((draggable: Draggable) => Number)} [dragSpeed]
594+
* @property {Number|DraggableDragThresholdParams|((draggable: Draggable) => Number|DraggableDragThresholdParams)} [dragThreshold]
588595
* @property {Number|((draggable: Draggable) => Number)} [scrollSpeed]
589596
* @property {Number|((draggable: Draggable) => Number)} [scrollThreshold]
590597
* @property {Number|((draggable: Draggable) => Number)} [minVelocity]

0 commit comments

Comments
 (0)