fix: "making things draggable blocks touch scrolling"

docs/src/documentation/options/touchAction/+option.mdx

@@ -0,0 +1,16 @@
+---
+title: touchAction
+type: 'string'
+defaultValue: 'none'
+---
+
+import Code from '$components/options/OptionsCode.astro';
+import Example from '$components/options/OptionsExample.astro';
+import Examples from '$components/options/OptionsExamples.svelte';
+
+export const shortDescription =
+  'Choose to set the initial touch-action of an element to a different value than "none"';
+
+<p>{shortDescription}</p>
+
+By default, the "touch-action" style is set to `none` upon initalizing the draggable on an element.

package.json

@@ -21,6 +21,7 @@
 		"@types/react": "^18.0.28",
 		"@types/react-dom": "^18.0.11",
 		"brotli-size": "^4.0.0",
+		"csstype": "^3.1.2",
 		"fast-glob": "^3.2.12",
 		"jsdom": "^21.1.0",
 		"nx": "15.7.2",

packages/core/src/index.ts

@@ -1,3 +1,5 @@
+import type { Property } from 'csstype';
+
 export type DragBoundsCoords = {
 	/** Number of pixels from left of the document */
 	left: number;
@@ -182,6 +184,11 @@ export type DragOptions = {
 	 */
 	handle?: string | HTMLElement | HTMLElement[];
 
+	/**
+	 * Choose to set the initial touch-action of an element to a different value than 'none'
+	 */
+	touchAction?: Property.TouchAction;
+
 	/**
 	 * Class to apply on the element on which `use:draggable` is applied.
 	 * Note that if `handle` is provided, it will still apply class on the element to which this action is applied, **NOT** the handle
@@ -258,6 +265,8 @@ export const draggable = (node: HTMLElement, options: DragOptions = {}) => {
 		cancel,
 		handle,
 
+		touchAction = 'none',
+
 		defaultClass = DEFAULT_CLASS.MAIN,
 		defaultClassDragging = DEFAULT_CLASS.DRAGGING,
 		defaultClassDragged = DEFAULT_CLASS.DRAGGED,
@@ -359,10 +368,11 @@ export const draggable = (node: HTMLElement, options: DragOptions = {}) => {
 
 	listen('pointerdown', dragStart, false);
 	listen('pointerup', dragEnd, false);
+	listen('touchend', dragEnd, false);
 	listen('pointermove', drag, false);
 
 	// On mobile, touch can become extremely janky without it
-	setStyle(node, 'touch-action', 'none');
+	setStyle(node, 'touch-action', touchAction);
 
 	const calculateInverseScale = () => {
 		// Calculate the current scale of the node