diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 65b84dd7..839b79c7 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -224,6 +224,14 @@ export type DragOptions = { * Fires when dragging ends */ onDragEnd?: (data: DragEventData) => void; + + /** + * Time in milliseconds a user must hold before dragging starts. + * This can help prevent accidental drags. + * + * @default 100ms + */ + holdDelay?: number; }; const enum DEFAULT_CLASS { @@ -267,6 +275,7 @@ export const draggable = (node: HTMLElement, options: DragOptions = {}) => { onDragStart, onDrag, onDragEnd, + holdDelay = 100, } = options; let active = false; @@ -373,11 +382,26 @@ export const draggable = (node: HTMLElement, options: DragOptions = {}) => { return inverseScale; }; + let holdTimeout: number | undefined; + let draggingAllowed = false; + function dragStart(e: PointerEvent) { if (disabled) return; if (e.button === 2) return; + // Start the hold delay timer + if (holdDelay > 0) { + holdTimeout = window.setTimeout(() => { + draggingAllowed = true; + fireSvelteDragStartEvent(); + }, holdDelay); + } else { + draggingAllowed = true; + fireSvelteDragStartEvent(); + } + + activePointers.add(e.pointerId); if (ignoreMultitouch && activePointers.size > 1) return e.preventDefault(); @@ -438,6 +462,14 @@ export const draggable = (node: HTMLElement, options: DragOptions = {}) => { } function dragEnd(e: PointerEvent) { + if (holdTimeout) { + clearTimeout(holdTimeout); + } + + if (!draggingAllowed) return; + + draggingAllowed = false; + activePointers.delete(e.pointerId); if (!active) return; @@ -459,6 +491,8 @@ export const draggable = (node: HTMLElement, options: DragOptions = {}) => { } function drag(e: PointerEvent) { + if (!draggingAllowed) return; + if (!active || (ignoreMultitouch && activePointers.size > 1)) return; if (recomputeBounds.drag) computedBounds = computeBoundRect(bounds, node); diff --git a/packages/svelte/demo/src/routes/+page.svelte b/packages/svelte/demo/src/routes/+page.svelte index 9627afd4..2935942d 100644 --- a/packages/svelte/demo/src/routes/+page.svelte +++ b/packages/svelte/demo/src/routes/+page.svelte @@ -170,6 +170,7 @@ progressX.set(offsetX); progressY.set(offsetY); }, + holdDelay: 200 }} class="box" >