From c784f9747700f806b5c7424e7b226e20e2af4d31 Mon Sep 17 00:00:00 2001
From: Jeff Robbins <jeff@jjeff.com>
Date: Sat, 13 Jun 2026 20:12:30 -0400
Subject: [PATCH] fix(showcase): tune touch long-press so drags don't fall
 through to page scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On touch the library already gates drag behind a 200ms hold
(delayOnTouchOnly default) and cancels the pending drag if the finger
moves more than touchStartThreshold (default 5px) before the timer
fires. Because touch-action is 'manipulation' while the timer is
pending, a cancelled drag falls straight through to a page scroll — so
the natural "press and immediately move to drag" motion scrolled the
page on iPhone instead of dragging.

Apply a shared TOUCH config (delayOnTouchOnly: 150, touchStartThreshold:
15) to every showcase demo: the drag arms faster and tolerates the
finger drift of a deliberate drag-start, while a fast scroll flick still
exceeds 15px well under 150ms and scrolls as before.

Demo-config only; no library change.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 index.html | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/index.html b/index.html
index bb0421c..4ea0b3d 100644
--- a/index.html
+++ b/index.html
@@ -722,10 +722,21 @@ <h3>Drag empty space to select — Shift adds, Alt subtracts</h3>
       window.sortables = [];
       window.resortableLoaded = true;
 
+      // Touch tuning shared by every demo below.
+      // The library default is delayOnTouchOnly: 200ms / touchStartThreshold: 5px.
+      // That 5px cancel-threshold is so tight that a natural drag motion (press +
+      // immediately move) blows past it before the 200ms hold elapses, so the
+      // pending drag is cancelled and the gesture falls through to a PAGE SCROLL.
+      // Snappier hold (150ms) + a forgiving 15px tolerance means a deliberate
+      // press-and-drag reliably starts a drag, while a fast swipe — which covers
+      // far more than 15px well under 150ms — still scrolls the page.
+      const TOUCH = { delayOnTouchOnly: 150, touchStartThreshold: 15 };
+
       // Smooth Transitions
       const smoothList = document.getElementById('smooth-list');
       if (smoothList) {
         window.sortables.push(new Sortable(smoothList, {
+          ...TOUCH,
           animation: 300,
           draggable: '.sortable-item',
           easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
@@ -742,6 +753,7 @@ <h3>Drag empty space to select — Shift adds, Alt subtracts</h3>
       const multiSelectList = document.getElementById('multi-select-list');
       if (multiSelectList) {
         window.sortables.push(new Sortable(multiSelectList, {
+          ...TOUCH,
           animation: 200,
           draggable: '.sortable-item',
           multiDrag: true,
@@ -754,6 +766,7 @@ <h3>Drag empty space to select — Shift adds, Alt subtracts</h3>
       const keyboardList = document.getElementById('keyboard-list');
       if (keyboardList) {
         window.sortables.push(new Sortable(keyboardList, {
+          ...TOUCH,
           animation: 200,
           draggable: '.sortable-item',
           multiDrag: true,
@@ -768,6 +781,7 @@ <h3>Drag empty space to select — Shift adds, Alt subtracts</h3>
       const marqueeList = document.getElementById('marquee-list');
       if (marqueeList) {
         const marqueeSortable = new Sortable(marqueeList, {
+          ...TOUCH,
           animation: 200,
           draggable: '.sortable-item',
           multiDrag: true,
@@ -780,6 +794,7 @@ <h3>Drag empty space to select — Shift adds, Alt subtracts</h3>
 
       // Kanban
       const kanbanOptions = {
+        ...TOUCH,
         group: 'kanban',
         animation: 200,
         draggable: '.kanban-card',
@@ -794,6 +809,7 @@ <h3>Drag empty space to select — Shift adds, Alt subtracts</h3>
       const imageGallery = document.getElementById('image-gallery');
       if (imageGallery) {
         window.sortables.push(new Sortable(imageGallery, {
+          ...TOUCH,
           animation: 300,
           draggable: '.gallery-item',
           ghostClass: 'sortable-ghost',
@@ -806,6 +822,7 @@ <h3>Drag empty space to select — Shift adds, Alt subtracts</h3>
       const nestedList = document.getElementById('nested-list');
       if (nestedList) {
         window.sortables.push(new Sortable(nestedList, {
+          ...TOUCH,
           animation: 200,
           draggable: '.folder',
           handle: '.folder-header',
@@ -814,6 +831,7 @@ <h3>Drag empty space to select — Shift adds, Alt subtracts</h3>
         }));
       }
       const folderOptions = {
+        ...TOUCH,
         group: 'files',
         animation: 150,
         draggable: '.file',