From 9421aa8adcdb5c208c16925bf22964efc89abec0 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Mon, 6 Sep 2021 14:18:12 -0400 Subject: [PATCH] change touch-action wording, add touch-action to examples --- api-documentation/draggable/README.md | 5 ++--- api-documentation/sensors/pointer.md | 4 +--- api-documentation/sensors/touch.md | 4 +--- guides/getting-started.md | 17 ++++++++++------- introduction/getting-started.md | 24 ++++++++++++++---------- presets/sortable/README.md | 5 +++++ presets/sortable/usesortable.md | 3 +++ 7 files changed, 36 insertions(+), 26 deletions(-) diff --git a/api-documentation/draggable/README.md b/api-documentation/draggable/README.md index ec30be4..9555aba 100644 --- a/api-documentation/draggable/README.md +++ b/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. diff --git a/api-documentation/sensors/pointer.md b/api-documentation/sensors/pointer.md index 4120e7a..8e21fd3 100644 --- a/api-documentation/sensors/pointer.md +++ b/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. diff --git a/api-documentation/sensors/touch.md b/api-documentation/sensors/touch.md index ce9cbb2..42d2a8d 100644 --- a/api-documentation/sensors/touch.md +++ b/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. diff --git a/guides/getting-started.md b/guides/getting-started.md index 9aa1e3f..a5c560d 100644 --- a/guides/getting-started.md +++ b/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 (