Change touch-action wording, add touch-action to examples

api-documentation/draggable/README.md

@@ -23,6 +23,7 @@ function Draggable() {
   });
   const style = {
     transform: CSS.Translate.toString(transform),
+    touchAction: 'none'
   };
 
   return (
@@ -191,14 +192,12 @@ To learn more about the best practices for making draggable interfaces accessibl
 
 #### `touch-action`
 
-We highly recommend you specify the `touch-action` CSS property for all of your draggable elements.
+You must set the `touch-action` CSS property to `none` on all draggable elements for dragging to work properly on touch devices. Otherwise, attempting to drag the element will cause scrolling to occur instead.
 
 > The **`touch-action`** CSS property sets how an element's region can be manipulated by a touchscreen user \(for example, by zooming features built into the browser\).  
 >   
 > Source: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action)
 
-In general, we recommend you set the `touch-action` property to `none` for draggable elements in order to prevent scrolling on mobile devices. 
-
 {% hint style="info" %}
 For [Pointer Events,](../sensors/pointer.md) there is no way to prevent the default behaviour of the browser on touch devices when interacting with a draggable element from the pointer event listeners. Using `touch-action: none;` is the only way to reliably prevent scrolling for pointer events.
 

api-documentation/sensors/pointer.md

@@ -56,14 +56,12 @@ This property is particularly useful for touch input, where some tolerance shoul
 
 #### `touch-action`
 
-We highly recommend you specify the `touch-action` CSS property for all of your draggable elements.
+You must set the `touch-action` CSS property to `none` on all draggable elements for dragging to work properly on touch devices. Otherwise, attempting to drag the element will cause scrolling to occur instead.
 
 > The **`touch-action`** CSS property sets how an element's region can be manipulated by a touchscreen user \(for example, by zooming features built into the browser\).  
 >   
 > Source: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action)
 
-In general, we recommend you set the `touch-action` property to `none` for draggable elements in order to prevent scrolling on mobile devices. 
-
 {% hint style="info" %}
 For [Pointer Events,](pointer.md) there is no way to prevent the default behaviour of the browser on touch devices when interacting with a draggable element from the pointer event listeners. Using `touch-action: none;` is the only way to reliably prevent scrolling for pointer events.
 

api-documentation/sensors/touch.md

@@ -48,14 +48,12 @@ This property is particularly useful for touch input, where some tolerance shoul
 
 #### `touch-action`
 
-We highly recommend you specify the `touch-action` CSS property for all of your draggable elements.
+You must set the `touch-action` CSS property to `none` on all draggable elements for dragging to work properly on touch devices. Otherwise, attempting to drag the element will cause scrolling to occur instead.
 
 > The **`touch-action`** CSS property sets how an element's region can be manipulated by a touchscreen user \(for example, by zooming features built into the browser\).  
 >   
 > Source: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action)
 
-In general, we recommend you set the `touch-action` property to `none` for draggable elements in order to prevent scrolling on mobile devices. 
-
 {% hint style="info" %}
 For [Pointer Events,](pointer.md) there is no way to prevent the default behaviour of the browser on touch devices when interacting with a draggable element from the pointer event listeners. Using `touch-action: none;` is the only way to reliably prevent scrolling for pointer events.
 

guides/getting-started.md

@@ -89,10 +89,10 @@ function Draggable(props) {
   const {attributes, listeners, setNodeRef, transform} = useDraggable({
     id: 'draggable',
   });
-  const style = transform ? {
-    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-  } : undefined;
-
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    touchAction: 'none'
+  };
 
   return (
     <button ref={setNodeRef} style={style} {...listeners} {...attributes}>
@@ -110,6 +110,7 @@ As you can see from the example above, it really only takes just a few lines to
 **Tips:** 
 
 * For performance reasons, we recommend you use **`transform`** over other positional CSS properties to move the dragged element. 
+* Setting the `touch-action` CSS property to `none` is required for dragging to work properly on touch devices. See the [PointerSensor documentation](../api-documentation/sensors/pointer.md#touch-action) for details.
 * You'll likely want to alter the **`z-index`** of your Draggable component to ensure it appears on top of other elements.
 * If your item needs to move from one container to another, we recommend you use the [`<DraggableClone>`](../api-documentation/draggable/clone.md) component so the item isn't constrained to its parent's stacking context and overflow constraints.
 {% endhint %}
@@ -122,6 +123,7 @@ import {CSS} from '@dnd-kit/utilities';
 // Within your component that receives `transform` from `useDraggable`:
 const style = {
   transform: CSS.Translate.toString(transform),
+  touchAction: 'none'
 }
 ```
 
@@ -199,9 +201,10 @@ export function Draggable(props) {
   const {attributes, listeners, setNodeRef, transform} = useDraggable({
     id: 'draggable',
   });
-  const style = transform ? {
-    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-  } : undefined;
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    touchAction: 'none'
+  };
 
 
   return (

introduction/getting-started.md

@@ -92,10 +92,10 @@ function Draggable(props) {
   const {attributes, listeners, setNodeRef, transform} = useDraggable({
     id: 'draggable',
   });
-  const style = transform ? {
-    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-  } : undefined;
-
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    touchAction: 'none'
+  };
 
   return (
     <button ref={setNodeRef} style={style} {...listeners} {...attributes}>
@@ -113,6 +113,7 @@ As you can see from the example above, it really only takes just a few lines to
 **Tips:** 
 
 * For performance reasons, we recommend you use **`transform`** over other positional CSS properties to move the dragged element. 
+* Setting the `touch-action` CSS property to `none` is required for dragging to work properly on touch devices. See the [PointerSensor documentation](../api-documentation/sensors/pointer.md#touch-action) for details.
 * You'll likely want to alter the **`z-index`** of your Draggable component to ensure it appears on top of other elements.
 * If your item needs to move from one container to another, we recommend you use the [`<DragOverlay>`](../api-documentation/draggable/drag-overlay.md) component so the item isn't constrained to its parent's stacking context and overflow constraints.
 {% endhint %}
@@ -125,6 +126,7 @@ import {CSS} from '@dnd-kit/utilities';
 // Within your component that receives `transform` from `useDraggable`:
 const style = {
   transform: CSS.Translate.toString(transform),
+  touchAction: 'none'
 }
 ```
 
@@ -203,9 +205,10 @@ export function Draggable(props) {
   const {attributes, listeners, setNodeRef, transform} = useDraggable({
     id: 'draggable',
   });
-  const style = transform ? {
-    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-  } : undefined;
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    touchAction: 'none'
+  };
 
 
   return (
@@ -299,9 +302,10 @@ export function Draggable(props) {
   const {attributes, listeners, setNodeRef, transform} = useDraggable({
     id: props.id,
   });
-  const style = transform ? {
-    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-  } : undefined;
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    touchAction: 'none'
+  };
 
 
   return (

presets/sortable/README.md

@@ -97,6 +97,7 @@ export function SortableItem(props) {
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
+    touchAction: 'none'
   };
 
   return (
@@ -235,6 +236,7 @@ function SortableItem(props) {
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
+    touchAction: 'none'
   };
 
   return (
@@ -443,6 +445,7 @@ function SortableItem(props) {
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
+    touchAction: 'none'
   };
 
   return (
@@ -514,6 +517,7 @@ export function SortableItem(props) {
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
+    touchAction: 'none'
   };
 
   return (
@@ -736,6 +740,7 @@ export function SortableItem(props) {
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
+    touchAction: 'none'
   };
 
   return (

presets/sortable/usesortable.md

@@ -31,6 +31,7 @@ function SortableItem(props) {
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
+    touchAction: 'none'
   };
 
   return (
@@ -168,6 +169,7 @@ function SortableItem(props) {
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
+    touchAction: 'none'
   };
 
   return (
@@ -195,6 +197,7 @@ function SortableItem(props) {
     '--translate-x': transform ? transform.x : 0,
     '--translate-y': transform ? transform.y : 0,
     '--transition': transition,
+    touchAction: 'none'
   };
 
   return (