docs: improve touch device UX

Author: itsjavi

README.md

@@ -1108,6 +1108,18 @@ The overlay can be customized with style and className props:
 />
 ```
 
+## Troubleshooting
+
+### Touch devices
+
+On touch devices, you might need to disable the default touch behavior to prevent the page from scrolling on drag, by
+setting the `touch-action: none` in CSS, on the draggable elements or its parent.
+
+```tsx
+// Example using Tailwind CSS
+<DragOverlayProvider className="touch-none">{/* Your draggable and droppable components */}</DragOverlayProvider>
+```
+
 ## Author
 
 Javier Aguilar

llms.txt

@@ -845,3 +845,16 @@ CODE:
 ```
 
 ----------------------------------------
+
+TITLE: Touch devices
+DESCRIPTION: On touch devices, you might need to disable the default touch behavior to prevent the page from scrolling on drag, by setting the `touch-action: none` in CSS, on the draggable elements or its parent.
+SOURCE: https://github.com/pizzajsdev/dragswag/blob/main/README.md#touch-devices
+
+LANGUAGE: tsx
+CODE:
+```
+<div className="touch-none">
+  <DraggableSquare />
+</div>
+```
+

packages/docs/app/examples/draggable-grid-cells/draggable-grid-cells.tsx

@@ -14,7 +14,7 @@ const DraggableSquare = ({ color, className }: { color: string; className?: stri
   const opacity = isDragging ? 0.5 : 1
 
   return draggable(
-    <div className={cn('square', className)} style={{ backgroundColor: color, opacity }}>
+    <div className={cn('square touch-none', className)} style={{ backgroundColor: color, opacity }}>
       {isDragging ? 'Dragging' : 'Drag me'}
     </div>,
   )

packages/docs/app/examples/draggable-list/draggable-list.tsx

@@ -75,7 +75,7 @@ function Item({ text, index, moveItem }: ItemProps) {
 
   return droppable(
     draggable(
-      <div className={cn('item-wrapper', isDragging && 'dragging')}>
+      <div className={cn('item-wrapper touch-none', isDragging && 'dragging')}>
         <div
           className={cn(
             'item-placeholder',

packages/docs/app/examples/kanban-board/dashboard.tsx

@@ -158,7 +158,7 @@ const Dashboard = () => {
   const { tasks } = useTasks()
 
   return (
-    <Styled.DashboardColumns>
+    <Styled.DashboardColumns className="touch-none flex-col sm:flex-row">
       {columns.map((column) => (
         <Column
           key={column.status}

packages/docs/app/routes/examples/layout.tsx

@@ -4,7 +4,7 @@ import { Outlet } from 'react-router'
 
 export default function Layout() {
   return (
-    <div className="p-16">
+    <div className="p-4 sm:p-16">
       <header className="flex flex-col items-center gap-4 text-center">
         <Logo withHeading />
         <Heading tagName="h2">Examples</Heading>