svelte-dnd-action 0.9.61 → 0.9.63

package/README.md

@@ -119,6 +119,10 @@ An options-object with the following attributes:
 | `autoAriaDisabled` | Boolean | No | `false` | Setting it to true will disable all the automatically added aria attributes and aria alerts (for example when the user starts/ stops dragging using the keyboard).<br /> **Use it only if you intend to implement your own custom instructions, roles and alerts.** In such a case, you might find the exported function `alertToScreenReader(string)` useful. |
 | `centreDraggedOnCursor` | Boolean | No | `false` | Setting it to true will cause elements from this dnd-zone to position their center on the cursor on drag start, effectively turning the cursor to the focal point that triggers all the dnd events (ex: entering another zone). Useful for dnd-zones with large items that can be dragged over small items. |
 | `dropAnimationDisabled` | Boolean | No | `false` | Setting it to true will disable the animation of the dropped element to its final place. |
+| `delayTouchStart` | Boolean \| Number | No | `false` | Prevents accidental drags on touch devices that should have been scrolls.  
+ • `true` – enable with sensible default (80 ms).  
+ • `number` – custom delay in milliseconds.  
+ • `false` / omitted – legacy behaviour (drag starts immediately). |
 
 ##### Output:
 
@@ -477,3 +481,15 @@ Starting with version 0.9.42. if you use the hint make sure to include it in the
 There is still quite a lot to do. If you'd like to contribute please get in touch (raise an issue or comment on an existing one).
 Ideally, be specific about which area you'd like to help with.
 Thank you for reading :)
+
+If your page is scrollable and you found that quick swipes on touch devices sometimes start a drag instead of scrolling, enable the new `delayTouchStart` option:
+
+```sveltehtml
+<section use:dndzone={{ items, flipDurationMs, delayTouchStart: true }}>
+    …
+</section>
+```
+
+Setting it to `true` waits 80 ms before hijacking the gesture; passing a number lets you tune the threshold.
+
+If you want screen-readers to tell the user which item is being dragged and which container it interacts with, **please add `aria-label` on the container and on every draggable item**. The library will take care of the rest.

package/dist/index.d.ts

@@ -59,6 +59,11 @@ export interface Options<T extends Item = Item> {
     autoAriaDisabled?: boolean;
     centreDraggedOnCursor?: boolean;
     dropAnimationDisabled?: boolean;
+    /**
+     * Improve touch UX: true => default 80 ms delay, number => custom delay in ms.
+     * false/undefined => drag starts instantly (legacy behaviour)
+     */
+    delayTouchStart?: boolean | number;
 }
 
 export interface DndZoneAttributes<T> {

package/dist/index.js

@@ -1331,6 +1331,7 @@
   var MIN_OBSERVATION_INTERVAL_MS = 100;
   var DISABLED_OBSERVATION_INTERVAL_MS = 20;
   var MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
+  var DEFAULT_TOUCH_DELAY_MS = 80;
   var DEFAULT_DROP_TARGET_STYLE$1 = {
     outline: "rgba(255, 255, 102, 0.7) solid 2px"
   };
@@ -1351,6 +1352,8 @@
   var isDraggedOutsideOfAnyDz = false;
   var scheduledForRemovalAfterDrop = [];
   var multiScroller;
+  var touchDragHoldTimer;
+  var touchHoldElapsed = false;
 
   // a map from type to a set of drop-zones
   var typeToDropZones$1 = new Map();
@@ -1673,19 +1676,12 @@
   }
   /* cleanup */
   function cleanupPostDrop() {
-    draggedEl.remove();
-    originalDragTarget.remove();
-    if (scheduledForRemovalAfterDrop.length) {
-      printDebug(function () {
-        return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
-      });
-      scheduledForRemovalAfterDrop.forEach(function (_ref) {
-        var dz = _ref.dz,
-          destroy = _ref.destroy;
-        destroy();
-        dz.remove();
-      });
-      scheduledForRemovalAfterDrop = [];
+    // Remove the temporary elements that were kept in the DOM during the drag
+    if (draggedEl && draggedEl.remove) {
+      draggedEl.remove();
+    }
+    if (originalDragTarget && originalDragTarget.remove) {
+      originalDragTarget.remove();
     }
     draggedEl = undefined;
     originalDragTarget = undefined;
@@ -1701,6 +1697,23 @@
     finalizingPreviousDrag = false;
     unlockOriginDzMinDimensions = undefined;
     isDraggedOutsideOfAnyDz = false;
+    if (touchDragHoldTimer) {
+      clearTimeout(touchDragHoldTimer);
+    }
+    touchDragHoldTimer = undefined;
+    touchHoldElapsed = false;
+    if (scheduledForRemovalAfterDrop.length) {
+      printDebug(function () {
+        return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
+      });
+      scheduledForRemovalAfterDrop.forEach(function (_ref) {
+        var dz = _ref.dz,
+          destroy = _ref.destroy;
+        destroy();
+        dz.remove();
+      });
+      scheduledForRemovalAfterDrop = [];
+    }
   }
   function dndzone$2(node, options) {
     var initialized = false;
@@ -1715,7 +1728,8 @@
       dropTargetClasses: [],
       transformDraggedElement: function transformDraggedElement() {},
       centreDraggedOnCursor: false,
-      dropAnimationDisabled: false
+      dropAnimationDisabled: false,
+      delayTouchStartMs: 0
     };
     printDebug(function () {
       return ["dndzone good to go options: ".concat(toString(options), ", config: ").concat(toString(config)), {
@@ -1743,6 +1757,11 @@
       window.removeEventListener("touchmove", handleMouseMoveMaybeDragStart);
       window.removeEventListener("mouseup", handleFalseAlarm);
       window.removeEventListener("touchend", handleFalseAlarm);
+      if (touchDragHoldTimer) {
+        clearTimeout(touchDragHoldTimer);
+        touchDragHoldTimer = undefined;
+        touchHoldElapsed = false;
+      }
     }
     function handleFalseAlarm(e) {
       removeMaybeListeners();
@@ -1761,8 +1780,29 @@
       }
     }
     function handleMouseMoveMaybeDragStart(e) {
+      var isTouch = !!e.touches;
+      var c = isTouch ? e.touches[0] : e;
+      // If touch drag delay is configured and not elapsed yet, allow scrolling until either
+      // the delay elapses (timer will call handleDragStart) or the user moves significantly,
+      // in which case we cancel the potential drag and let the interaction be a scroll.
+      if (isTouch && config.delayTouchStartMs > 0 && !touchHoldElapsed) {
+        currentMousePosition = {
+          x: c.clientX,
+          y: c.clientY
+        };
+        if (Math.abs(currentMousePosition.x - dragStartMousePosition.x) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX || Math.abs(currentMousePosition.y - dragStartMousePosition.y) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX) {
+          // User started scrolling, cancel drag attempt.
+          if (touchDragHoldTimer) {
+            clearTimeout(touchDragHoldTimer);
+            touchDragHoldTimer = undefined;
+          }
+          handleFalseAlarm(e);
+        }
+        return; // Do not preventDefault so scrolling works.
+      }
+
+      // legacy / post-delay path – block scrolling and maybe start drag
       e.preventDefault();
-      var c = e.touches ? e.touches[0] : e;
       currentMousePosition = {
         x: c.clientX,
         y: c.clientY
@@ -1793,15 +1833,29 @@
         });
         return;
       }
-      e.preventDefault();
+      var isTouchStart = !!e.touches;
+      var useDelay = isTouchStart && config.delayTouchStartMs > 0;
+      if (!useDelay) {
+        e.preventDefault();
+      }
       e.stopPropagation();
-      var c = e.touches ? e.touches[0] : e;
+      var c = isTouchStart ? e.touches[0] : e;
       dragStartMousePosition = {
         x: c.clientX,
         y: c.clientY
       };
       currentMousePosition = _objectSpread2({}, dragStartMousePosition);
       originalDragTarget = e.currentTarget;
+      if (useDelay) {
+        touchHoldElapsed = false;
+        touchDragHoldTimer = window.setTimeout(function () {
+          // If the finger is still down and no false-alarm happened
+          if (!originalDragTarget) return;
+          touchHoldElapsed = true;
+          removeMaybeListeners();
+          handleDragStart();
+        }, config.delayTouchStartMs);
+      }
       addMaybeListeners();
     }
     function handleDragStart() {
@@ -1899,8 +1953,17 @@
         _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
         centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn,
         _ref2$dropAnimationDi = _ref2.dropAnimationDisabled,
-        dropAnimationDisabled = _ref2$dropAnimationDi === void 0 ? false : _ref2$dropAnimationDi;
+        dropAnimationDisabled = _ref2$dropAnimationDi === void 0 ? false : _ref2$dropAnimationDi,
+        _ref2$delayTouchStart = _ref2.delayTouchStart,
+        delayTouchStartOpt = _ref2$delayTouchStart === void 0 ? false : _ref2$delayTouchStart;
       config.dropAnimationDurationMs = dropAnimationDurationMs;
+      var effectiveDelayMs = 0;
+      if (delayTouchStartOpt === true) {
+        effectiveDelayMs = DEFAULT_TOUCH_DELAY_MS;
+      } else if (typeof delayTouchStartOpt === "number" && isFinite(delayTouchStartOpt) && delayTouchStartOpt >= 0) {
+        effectiveDelayMs = delayTouchStartOpt;
+      }
+      config.delayTouchStartMs = effectiveDelayMs;
       if (config.type && newType !== config.type) {
         unregisterDropZone$1(node, config.type);
       }
@@ -2502,7 +2565,7 @@
     return handles;
   }
 
-  var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor", "dropAnimationDisabled"];
+  var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor", "delayTouchStart", "dropAnimationDisabled"];
 
   /**
    * A custom action to turn any container to a dnd zone and all of its direct children to draggables
@@ -2521,6 +2584,8 @@
    * @property {number} [zoneItemTabIndex] - set the tabindex of the list container items when not dragging
    * @property {object} [dropTargetStyle]
    * @property {string[]} [dropTargetClasses]
+   * @property {boolean|number} [delayTouchStart] - On touch devices, wait this long before converting the gesture to a drag.
+   * `true` uses the built-in default (80 ms).
    * @property {boolean} [dropAnimationDisabled] - cancels the drop animation to place
    * @property {function} [transformDraggedElement]
    * @param {HTMLElement} node - the element to enhance
@@ -2574,6 +2639,7 @@
       options.transformDraggedElement;
       options.autoAriaDisabled;
       options.centreDraggedOnCursor;
+      var delayTouchStart = options.delayTouchStart;
       options.dropAnimationDisabled;
       var rest = _objectWithoutProperties(options, _excluded);
     /*eslint-enable*/
@@ -2598,6 +2664,13 @@
     if (zoneItemTabIndex && !isInt(zoneItemTabIndex)) {
       throw new Error("zoneItemTabIndex should be a number but instead it is a ".concat(_typeof(zoneItemTabIndex), ", ").concat(toString(zoneItemTabIndex)));
     }
+    if (delayTouchStart !== undefined && delayTouchStart !== false) {
+      var validBoolean = delayTouchStart === true;
+      var validNumber = typeof delayTouchStart === "number" && isFinite(delayTouchStart) && delayTouchStart >= 0;
+      if (!validBoolean && !validNumber) {
+        throw new Error("delayTouchStart should be a boolean (true/false) or a non-negative number but instead it is a ".concat(_typeof(delayTouchStart), ", ").concat(toString(delayTouchStart)));
+      }
+    }
   }
   function isInt(value) {
     return !isNaN(value) && function (x) {
@@ -2629,10 +2702,10 @@
   }
 
   var isItemsDragDisabled = createStore(true);
+  var userDragDisabled = createStore(false);
   function getAddedOptions() {
-    var isItemsDragDisabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     return {
-      dragDisabled: isItemsDragDisabled,
+      dragDisabled: userDragDisabled.get() || isItemsDragDisabled.get(),
       zoneItemTabIndex: -1
     };
   }
@@ -2647,12 +2720,22 @@
    * @return {{update: (newOptions: Object) => {}, destroy: () => {}}}
    */
   function dragHandleZone(node, options) {
+    var _options$dragDisabled;
+    // Initialise stores from initial options
+    userDragDisabled.set((_options$dragDisabled = options === null || options === void 0 ? void 0 : options.dragDisabled) !== null && _options$dragDisabled !== void 0 ? _options$dragDisabled : false);
     var currentOptions = options;
     var zone = dndzone(node, _objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
-    function isItemDisabledCB(isItemsDragDisabled) {
-      zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions(isItemsDragDisabled)));
+    function updateZone() {
+      zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
     }
-    isItemsDragDisabled.subscribe(isItemDisabledCB);
+
+    // Subscribe to internal store so finishing a drag updates the zone
+    isItemsDragDisabled.subscribe(updateZone);
+
+    // We don't need to subscribe to userDragDisabled here because updates to
+    // it always come through the `update` lifecycle and will call `updateZone`
+    // anyway.
+
     function consider(e) {
       var _e$detail$info = e.detail.info,
         source = _e$detail$info.source,
@@ -2673,13 +2756,16 @@
     node.addEventListener("finalize", finalize);
     return {
       update: function update(newOptions) {
+        var _currentOptions$dragD, _currentOptions;
         currentOptions = newOptions;
-        zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions(isItemsDragDisabled.get())));
+        // keep store in sync with external prop
+        userDragDisabled.set((_currentOptions$dragD = (_currentOptions = currentOptions) === null || _currentOptions === void 0 ? void 0 : _currentOptions.dragDisabled) !== null && _currentOptions$dragD !== void 0 ? _currentOptions$dragD : false);
+        updateZone();
       },
       destroy: function destroy() {
         node.removeEventListener("consider", consider);
         node.removeEventListener("finalize", finalize);
-        isItemsDragDisabled.unsubscribe(isItemDisabledCB);
+        isItemsDragDisabled.unsubscribe(updateZone);
       }
     };
   }
@@ -2708,10 +2794,21 @@
       window.removeEventListener("mouseup", resetStartDrag);
       window.removeEventListener("touchend", resetStartDrag);
     }
-    isItemsDragDisabled.subscribe(function (disabled) {
-      handle.tabIndex = disabled ? 0 : -1;
-      handle.style.cursor = disabled ? "grab" : "grabbing";
-    });
+    var recomputeHandleState = function recomputeHandleState() {
+      var userDisabled = userDragDisabled.get();
+      var internalDisabled = isItemsDragDisabled.get();
+      if (userDisabled) {
+        handle.tabIndex = -1;
+        handle.style.cursor = ""; // default cursor
+      } else {
+        handle.tabIndex = internalDisabled ? 0 : -1;
+        handle.style.cursor = internalDisabled ? "grab" : "grabbing";
+      }
+    };
+
+    // Subscribe to both stores
+    userDragDisabled.subscribe(recomputeHandleState);
+    isItemsDragDisabled.subscribe(recomputeHandleState);
     handle.addEventListener("mousedown", startDrag);
     handle.addEventListener("touchstart", startDrag);
     handle.addEventListener("keydown", handleKeyDown);
@@ -2721,6 +2818,8 @@
         handle.removeEventListener("mousedown", startDrag);
         handle.removeEventListener("touchstart", startDrag);
         handle.removeEventListener("keydown", handleKeyDown);
+        userDragDisabled.unsubscribe(recomputeHandleState);
+        isItemsDragDisabled.unsubscribe(recomputeHandleState);
       }
     };
   }

package/dist/index.mjs

@@ -1325,6 +1325,7 @@ var DEFAULT_DROP_ZONE_TYPE$1 = "--any--";
 var MIN_OBSERVATION_INTERVAL_MS = 100;
 var DISABLED_OBSERVATION_INTERVAL_MS = 20;
 var MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
+var DEFAULT_TOUCH_DELAY_MS = 80;
 var DEFAULT_DROP_TARGET_STYLE$1 = {
   outline: "rgba(255, 255, 102, 0.7) solid 2px"
 };
@@ -1345,6 +1346,8 @@ var unlockOriginDzMinDimensions;
 var isDraggedOutsideOfAnyDz = false;
 var scheduledForRemovalAfterDrop = [];
 var multiScroller;
+var touchDragHoldTimer;
+var touchHoldElapsed = false;
 
 // a map from type to a set of drop-zones
 var typeToDropZones$1 = new Map();
@@ -1667,19 +1670,12 @@ function scheduleDZForRemovalAfterDrop(dz, destroy) {
 }
 /* cleanup */
 function cleanupPostDrop() {
-  draggedEl.remove();
-  originalDragTarget.remove();
-  if (scheduledForRemovalAfterDrop.length) {
-    printDebug(function () {
-      return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
-    });
-    scheduledForRemovalAfterDrop.forEach(function (_ref) {
-      var dz = _ref.dz,
-        destroy = _ref.destroy;
-      destroy();
-      dz.remove();
-    });
-    scheduledForRemovalAfterDrop = [];
+  // Remove the temporary elements that were kept in the DOM during the drag
+  if (draggedEl && draggedEl.remove) {
+    draggedEl.remove();
+  }
+  if (originalDragTarget && originalDragTarget.remove) {
+    originalDragTarget.remove();
   }
   draggedEl = undefined;
   originalDragTarget = undefined;
@@ -1695,6 +1691,23 @@ function cleanupPostDrop() {
   finalizingPreviousDrag = false;
   unlockOriginDzMinDimensions = undefined;
   isDraggedOutsideOfAnyDz = false;
+  if (touchDragHoldTimer) {
+    clearTimeout(touchDragHoldTimer);
+  }
+  touchDragHoldTimer = undefined;
+  touchHoldElapsed = false;
+  if (scheduledForRemovalAfterDrop.length) {
+    printDebug(function () {
+      return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
+    });
+    scheduledForRemovalAfterDrop.forEach(function (_ref) {
+      var dz = _ref.dz,
+        destroy = _ref.destroy;
+      destroy();
+      dz.remove();
+    });
+    scheduledForRemovalAfterDrop = [];
+  }
 }
 function dndzone$2(node, options) {
   var initialized = false;
@@ -1709,7 +1722,8 @@ function dndzone$2(node, options) {
     dropTargetClasses: [],
     transformDraggedElement: function transformDraggedElement() {},
     centreDraggedOnCursor: false,
-    dropAnimationDisabled: false
+    dropAnimationDisabled: false,
+    delayTouchStartMs: 0
   };
   printDebug(function () {
     return ["dndzone good to go options: ".concat(toString(options), ", config: ").concat(toString(config)), {
@@ -1737,6 +1751,11 @@ function dndzone$2(node, options) {
     window.removeEventListener("touchmove", handleMouseMoveMaybeDragStart);
     window.removeEventListener("mouseup", handleFalseAlarm);
     window.removeEventListener("touchend", handleFalseAlarm);
+    if (touchDragHoldTimer) {
+      clearTimeout(touchDragHoldTimer);
+      touchDragHoldTimer = undefined;
+      touchHoldElapsed = false;
+    }
   }
   function handleFalseAlarm(e) {
     removeMaybeListeners();
@@ -1755,8 +1774,29 @@ function dndzone$2(node, options) {
     }
   }
   function handleMouseMoveMaybeDragStart(e) {
+    var isTouch = !!e.touches;
+    var c = isTouch ? e.touches[0] : e;
+    // If touch drag delay is configured and not elapsed yet, allow scrolling until either
+    // the delay elapses (timer will call handleDragStart) or the user moves significantly,
+    // in which case we cancel the potential drag and let the interaction be a scroll.
+    if (isTouch && config.delayTouchStartMs > 0 && !touchHoldElapsed) {
+      currentMousePosition = {
+        x: c.clientX,
+        y: c.clientY
+      };
+      if (Math.abs(currentMousePosition.x - dragStartMousePosition.x) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX || Math.abs(currentMousePosition.y - dragStartMousePosition.y) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX) {
+        // User started scrolling, cancel drag attempt.
+        if (touchDragHoldTimer) {
+          clearTimeout(touchDragHoldTimer);
+          touchDragHoldTimer = undefined;
+        }
+        handleFalseAlarm(e);
+      }
+      return; // Do not preventDefault so scrolling works.
+    }
+
+    // legacy / post-delay path – block scrolling and maybe start drag
     e.preventDefault();
-    var c = e.touches ? e.touches[0] : e;
     currentMousePosition = {
       x: c.clientX,
       y: c.clientY
@@ -1787,15 +1827,29 @@ function dndzone$2(node, options) {
       });
       return;
     }
-    e.preventDefault();
+    var isTouchStart = !!e.touches;
+    var useDelay = isTouchStart && config.delayTouchStartMs > 0;
+    if (!useDelay) {
+      e.preventDefault();
+    }
     e.stopPropagation();
-    var c = e.touches ? e.touches[0] : e;
+    var c = isTouchStart ? e.touches[0] : e;
     dragStartMousePosition = {
       x: c.clientX,
       y: c.clientY
     };
     currentMousePosition = _objectSpread2({}, dragStartMousePosition);
     originalDragTarget = e.currentTarget;
+    if (useDelay) {
+      touchHoldElapsed = false;
+      touchDragHoldTimer = window.setTimeout(function () {
+        // If the finger is still down and no false-alarm happened
+        if (!originalDragTarget) return;
+        touchHoldElapsed = true;
+        removeMaybeListeners();
+        handleDragStart();
+      }, config.delayTouchStartMs);
+    }
     addMaybeListeners();
   }
   function handleDragStart() {
@@ -1893,8 +1947,17 @@ function dndzone$2(node, options) {
       _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
       centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn,
       _ref2$dropAnimationDi = _ref2.dropAnimationDisabled,
-      dropAnimationDisabled = _ref2$dropAnimationDi === void 0 ? false : _ref2$dropAnimationDi;
+      dropAnimationDisabled = _ref2$dropAnimationDi === void 0 ? false : _ref2$dropAnimationDi,
+      _ref2$delayTouchStart = _ref2.delayTouchStart,
+      delayTouchStartOpt = _ref2$delayTouchStart === void 0 ? false : _ref2$delayTouchStart;
     config.dropAnimationDurationMs = dropAnimationDurationMs;
+    var effectiveDelayMs = 0;
+    if (delayTouchStartOpt === true) {
+      effectiveDelayMs = DEFAULT_TOUCH_DELAY_MS;
+    } else if (typeof delayTouchStartOpt === "number" && isFinite(delayTouchStartOpt) && delayTouchStartOpt >= 0) {
+      effectiveDelayMs = delayTouchStartOpt;
+    }
+    config.delayTouchStartMs = effectiveDelayMs;
     if (config.type && newType !== config.type) {
       unregisterDropZone$1(node, config.type);
     }
@@ -2496,7 +2559,7 @@ function dndzone$1(node, options) {
   return handles;
 }
 
-var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor", "dropAnimationDisabled"];
+var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor", "delayTouchStart", "dropAnimationDisabled"];
 
 /**
  * A custom action to turn any container to a dnd zone and all of its direct children to draggables
@@ -2515,6 +2578,8 @@ var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabl
  * @property {number} [zoneItemTabIndex] - set the tabindex of the list container items when not dragging
  * @property {object} [dropTargetStyle]
  * @property {string[]} [dropTargetClasses]
+ * @property {boolean|number} [delayTouchStart] - On touch devices, wait this long before converting the gesture to a drag.
+ * `true` uses the built-in default (80 ms).
  * @property {boolean} [dropAnimationDisabled] - cancels the drop animation to place
  * @property {function} [transformDraggedElement]
  * @param {HTMLElement} node - the element to enhance
@@ -2568,6 +2633,7 @@ function validateOptions(options) {
     options.transformDraggedElement;
     options.autoAriaDisabled;
     options.centreDraggedOnCursor;
+    var delayTouchStart = options.delayTouchStart;
     options.dropAnimationDisabled;
     var rest = _objectWithoutProperties(options, _excluded);
   /*eslint-enable*/
@@ -2592,6 +2658,13 @@ function validateOptions(options) {
   if (zoneItemTabIndex && !isInt(zoneItemTabIndex)) {
     throw new Error("zoneItemTabIndex should be a number but instead it is a ".concat(_typeof(zoneItemTabIndex), ", ").concat(toString(zoneItemTabIndex)));
   }
+  if (delayTouchStart !== undefined && delayTouchStart !== false) {
+    var validBoolean = delayTouchStart === true;
+    var validNumber = typeof delayTouchStart === "number" && isFinite(delayTouchStart) && delayTouchStart >= 0;
+    if (!validBoolean && !validNumber) {
+      throw new Error("delayTouchStart should be a boolean (true/false) or a non-negative number but instead it is a ".concat(_typeof(delayTouchStart), ", ").concat(toString(delayTouchStart)));
+    }
+  }
 }
 function isInt(value) {
   return !isNaN(value) && function (x) {
@@ -2623,10 +2696,10 @@ function createStore(initialValue) {
 }
 
 var isItemsDragDisabled = createStore(true);
+var userDragDisabled = createStore(false);
 function getAddedOptions() {
-  var isItemsDragDisabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
   return {
-    dragDisabled: isItemsDragDisabled,
+    dragDisabled: userDragDisabled.get() || isItemsDragDisabled.get(),
     zoneItemTabIndex: -1
   };
 }
@@ -2641,12 +2714,22 @@ function getAddedOptions() {
  * @return {{update: (newOptions: Object) => {}, destroy: () => {}}}
  */
 function dragHandleZone(node, options) {
+  var _options$dragDisabled;
+  // Initialise stores from initial options
+  userDragDisabled.set((_options$dragDisabled = options === null || options === void 0 ? void 0 : options.dragDisabled) !== null && _options$dragDisabled !== void 0 ? _options$dragDisabled : false);
   var currentOptions = options;
   var zone = dndzone(node, _objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
-  function isItemDisabledCB(isItemsDragDisabled) {
-    zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions(isItemsDragDisabled)));
+  function updateZone() {
+    zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
   }
-  isItemsDragDisabled.subscribe(isItemDisabledCB);
+
+  // Subscribe to internal store so finishing a drag updates the zone
+  isItemsDragDisabled.subscribe(updateZone);
+
+  // We don't need to subscribe to userDragDisabled here because updates to
+  // it always come through the `update` lifecycle and will call `updateZone`
+  // anyway.
+
   function consider(e) {
     var _e$detail$info = e.detail.info,
       source = _e$detail$info.source,
@@ -2667,13 +2750,16 @@ function dragHandleZone(node, options) {
   node.addEventListener("finalize", finalize);
   return {
     update: function update(newOptions) {
+      var _currentOptions$dragD, _currentOptions;
       currentOptions = newOptions;
-      zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions(isItemsDragDisabled.get())));
+      // keep store in sync with external prop
+      userDragDisabled.set((_currentOptions$dragD = (_currentOptions = currentOptions) === null || _currentOptions === void 0 ? void 0 : _currentOptions.dragDisabled) !== null && _currentOptions$dragD !== void 0 ? _currentOptions$dragD : false);
+      updateZone();
     },
     destroy: function destroy() {
       node.removeEventListener("consider", consider);
       node.removeEventListener("finalize", finalize);
-      isItemsDragDisabled.unsubscribe(isItemDisabledCB);
+      isItemsDragDisabled.unsubscribe(updateZone);
     }
   };
 }
@@ -2702,10 +2788,21 @@ function dragHandle(handle) {
     window.removeEventListener("mouseup", resetStartDrag);
     window.removeEventListener("touchend", resetStartDrag);
   }
-  isItemsDragDisabled.subscribe(function (disabled) {
-    handle.tabIndex = disabled ? 0 : -1;
-    handle.style.cursor = disabled ? "grab" : "grabbing";
-  });
+  var recomputeHandleState = function recomputeHandleState() {
+    var userDisabled = userDragDisabled.get();
+    var internalDisabled = isItemsDragDisabled.get();
+    if (userDisabled) {
+      handle.tabIndex = -1;
+      handle.style.cursor = ""; // default cursor
+    } else {
+      handle.tabIndex = internalDisabled ? 0 : -1;
+      handle.style.cursor = internalDisabled ? "grab" : "grabbing";
+    }
+  };
+
+  // Subscribe to both stores
+  userDragDisabled.subscribe(recomputeHandleState);
+  isItemsDragDisabled.subscribe(recomputeHandleState);
   handle.addEventListener("mousedown", startDrag);
   handle.addEventListener("touchstart", startDrag);
   handle.addEventListener("keydown", handleKeyDown);
@@ -2715,6 +2812,8 @@ function dragHandle(handle) {
       handle.removeEventListener("mousedown", startDrag);
       handle.removeEventListener("touchstart", startDrag);
       handle.removeEventListener("keydown", handleKeyDown);
+      userDragDisabled.unsubscribe(recomputeHandleState);
+      isItemsDragDisabled.unsubscribe(recomputeHandleState);
     }
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "svelte-dnd-action",
     "description": "*An awesome drag and drop library for Svelte 3 and 4 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.61",
+    "version": "0.9.63",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/action.js

@@ -20,6 +20,8 @@ import {toString} from "./helpers/util";
  * @property {number} [zoneItemTabIndex] - set the tabindex of the list container items when not dragging
  * @property {object} [dropTargetStyle]
  * @property {string[]} [dropTargetClasses]
+ * @property {boolean|number} [delayTouchStart] - On touch devices, wait this long before converting the gesture to a drag.
+ * `true` uses the built-in default (80 ms).
  * @property {boolean} [dropAnimationDisabled] - cancels the drop animation to place
  * @property {function} [transformDraggedElement]
  * @param {HTMLElement} node - the element to enhance
@@ -75,6 +77,7 @@ function validateOptions(options) {
         transformDraggedElement,
         autoAriaDisabled,
         centreDraggedOnCursor,
+        delayTouchStart,
         dropAnimationDisabled,
         ...rest
     } = options;
@@ -98,6 +101,17 @@ function validateOptions(options) {
     if (zoneItemTabIndex && !isInt(zoneItemTabIndex)) {
         throw new Error(`zoneItemTabIndex should be a number but instead it is a ${typeof zoneItemTabIndex}, ${toString(zoneItemTabIndex)}`);
     }
+    if (delayTouchStart !== undefined && delayTouchStart !== false) {
+        const validBoolean = delayTouchStart === true;
+        const validNumber = typeof delayTouchStart === "number" && isFinite(delayTouchStart) && delayTouchStart >= 0;
+        if (!validBoolean && !validNumber) {
+            throw new Error(
+                `delayTouchStart should be a boolean (true/false) or a non-negative number but instead it is a ${typeof delayTouchStart}, ${toString(
+                    delayTouchStart
+                )}`
+            );
+        }
+    }
 }
 
 function isInt(value) {

package/src/pointerAction.js

@@ -39,6 +39,7 @@ const DEFAULT_DROP_ZONE_TYPE = "--any--";
 const MIN_OBSERVATION_INTERVAL_MS = 100;
 const DISABLED_OBSERVATION_INTERVAL_MS = 20;
 const MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
+const DEFAULT_TOUCH_DELAY_MS = 80;
 const DEFAULT_DROP_TARGET_STYLE = {
     outline: "rgba(255, 255, 102, 0.7) solid 2px"
 };
@@ -60,6 +61,8 @@ let unlockOriginDzMinDimensions;
 let isDraggedOutsideOfAnyDz = false;
 let scheduledForRemovalAfterDrop = [];
 let multiScroller;
+let touchDragHoldTimer;
+let touchHoldElapsed = false;
 
 // a map from type to a set of drop-zones
 const typeToDropZones = new Map();
@@ -310,16 +313,14 @@ function scheduleDZForRemovalAfterDrop(dz, destroy) {
 }
 /* cleanup */
 function cleanupPostDrop() {
-    draggedEl.remove();
-    originalDragTarget.remove();
-    if (scheduledForRemovalAfterDrop.length) {
-        printDebug(() => ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop]);
-        scheduledForRemovalAfterDrop.forEach(({dz, destroy}) => {
-            destroy();
-            dz.remove();
-        });
-        scheduledForRemovalAfterDrop = [];
+    // Remove the temporary elements that were kept in the DOM during the drag
+    if (draggedEl && draggedEl.remove) {
+        draggedEl.remove();
     }
+    if (originalDragTarget && originalDragTarget.remove) {
+        originalDragTarget.remove();
+    }
+
     draggedEl = undefined;
     originalDragTarget = undefined;
     draggedElData = undefined;
@@ -334,6 +335,19 @@ function cleanupPostDrop() {
     finalizingPreviousDrag = false;
     unlockOriginDzMinDimensions = undefined;
     isDraggedOutsideOfAnyDz = false;
+    if (touchDragHoldTimer) {
+        clearTimeout(touchDragHoldTimer);
+    }
+    touchDragHoldTimer = undefined;
+    touchHoldElapsed = false;
+    if (scheduledForRemovalAfterDrop.length) {
+        printDebug(() => ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop]);
+        scheduledForRemovalAfterDrop.forEach(({dz, destroy}) => {
+            destroy();
+            dz.remove();
+        });
+        scheduledForRemovalAfterDrop = [];
+    }
 }
 
 export function dndzone(node, options) {
@@ -349,7 +363,8 @@ export function dndzone(node, options) {
         dropTargetClasses: [],
         transformDraggedElement: () => {},
         centreDraggedOnCursor: false,
-        dropAnimationDisabled: false
+        dropAnimationDisabled: false,
+        delayTouchStartMs: 0
     };
     printDebug(() => [`dndzone good to go options: ${toString(options)}, config: ${toString(config)}`, {node}]);
     let elToIdx = new Map();
@@ -365,6 +380,11 @@ export function dndzone(node, options) {
         window.removeEventListener("touchmove", handleMouseMoveMaybeDragStart);
         window.removeEventListener("mouseup", handleFalseAlarm);
         window.removeEventListener("touchend", handleFalseAlarm);
+        if (touchDragHoldTimer) {
+            clearTimeout(touchDragHoldTimer);
+            touchDragHoldTimer = undefined;
+            touchHoldElapsed = false;
+        }
     }
     function handleFalseAlarm(e) {
         removeMaybeListeners();
@@ -384,8 +404,30 @@ export function dndzone(node, options) {
     }
 
     function handleMouseMoveMaybeDragStart(e) {
+        const isTouch = !!e.touches;
+        const c = isTouch ? e.touches[0] : e;
+        // If touch drag delay is configured and not elapsed yet, allow scrolling until either
+        // the delay elapses (timer will call handleDragStart) or the user moves significantly,
+        // in which case we cancel the potential drag and let the interaction be a scroll.
+        if (isTouch && config.delayTouchStartMs > 0 && !touchHoldElapsed) {
+            currentMousePosition = {x: c.clientX, y: c.clientY};
+            if (
+                Math.abs(currentMousePosition.x - dragStartMousePosition.x) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX ||
+                Math.abs(currentMousePosition.y - dragStartMousePosition.y) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX
+            ) {
+                // User started scrolling, cancel drag attempt.
+                if (touchDragHoldTimer) {
+                    clearTimeout(touchDragHoldTimer);
+                    touchDragHoldTimer = undefined;
+                }
+                handleFalseAlarm(e);
+            }
+            return; // Do not preventDefault so scrolling works.
+        }
+
+        // legacy / post-delay path – block scrolling and maybe start drag
         e.preventDefault();
-        const c = e.touches ? e.touches[0] : e;
+
         currentMousePosition = {x: c.clientX, y: c.clientY};
         if (
             Math.abs(currentMousePosition.x - dragStartMousePosition.x) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX ||
@@ -410,12 +452,30 @@ export function dndzone(node, options) {
             printDebug(() => "cannot start a new drag before finalizing previous one");
             return;
         }
-        e.preventDefault();
+        const isTouchStart = !!e.touches;
+        const useDelay = isTouchStart && config.delayTouchStartMs > 0;
+
+        if (!useDelay) {
+            e.preventDefault();
+        }
         e.stopPropagation();
-        const c = e.touches ? e.touches[0] : e;
+
+        const c = isTouchStart ? e.touches[0] : e;
         dragStartMousePosition = {x: c.clientX, y: c.clientY};
         currentMousePosition = {...dragStartMousePosition};
         originalDragTarget = e.currentTarget;
+
+        if (useDelay) {
+            touchHoldElapsed = false;
+            touchDragHoldTimer = window.setTimeout(() => {
+                // If the finger is still down and no false-alarm happened
+                if (!originalDragTarget) return;
+                touchHoldElapsed = true;
+                removeMaybeListeners();
+                handleDragStart();
+            }, config.delayTouchStartMs);
+        }
+
         addMaybeListeners();
     }
 
@@ -487,9 +547,19 @@ export function dndzone(node, options) {
         dropTargetClasses = [],
         transformDraggedElement = () => {},
         centreDraggedOnCursor = false,
-        dropAnimationDisabled = false
+        dropAnimationDisabled = false,
+        delayTouchStart: delayTouchStartOpt = false
     }) {
         config.dropAnimationDurationMs = dropAnimationDurationMs;
+
+        let effectiveDelayMs = 0;
+        if (delayTouchStartOpt === true) {
+            effectiveDelayMs = DEFAULT_TOUCH_DELAY_MS;
+        } else if (typeof delayTouchStartOpt === "number" && isFinite(delayTouchStartOpt) && delayTouchStartOpt >= 0) {
+            effectiveDelayMs = delayTouchStartOpt;
+        }
+        config.delayTouchStartMs = effectiveDelayMs;
+
         if (config.type && newType !== config.type) {
             unregisterDropZone(node, config.type);
         }

package/src/wrappers/withDragHandles.js

@@ -3,10 +3,11 @@ import {dndzone} from "../action";
 import {createStore} from "./simpleStore";
 
 const isItemsDragDisabled = createStore(true);
+const userDragDisabled = createStore(false);
 
-function getAddedOptions(isItemsDragDisabled = true) {
+function getAddedOptions() {
     return {
-        dragDisabled: isItemsDragDisabled,
+        dragDisabled: userDragDisabled.get() || isItemsDragDisabled.get(),
         zoneItemTabIndex: -1
     };
 }
@@ -21,18 +22,30 @@ function getAddedOptions(isItemsDragDisabled = true) {
  * @return {{update: (newOptions: Object) => {}, destroy: () => {}}}
  */
 export function dragHandleZone(node, options) {
+    // Initialise stores from initial options
+    userDragDisabled.set(options?.dragDisabled ?? false);
+
     let currentOptions = options;
+
     const zone = dndzone(node, {
         ...currentOptions,
         ...getAddedOptions()
     });
-    function isItemDisabledCB(isItemsDragDisabled) {
+
+    function updateZone() {
         zone.update({
             ...currentOptions,
-            ...getAddedOptions(isItemsDragDisabled)
+            ...getAddedOptions()
         });
     }
-    isItemsDragDisabled.subscribe(isItemDisabledCB);
+
+    // Subscribe to internal store so finishing a drag updates the zone
+    isItemsDragDisabled.subscribe(updateZone);
+
+    // We don't need to subscribe to userDragDisabled here because updates to
+    // it always come through the `update` lifecycle and will call `updateZone`
+    // anyway.
+
     function consider(e) {
         const {
             info: {source, trigger}
@@ -59,15 +72,14 @@ export function dragHandleZone(node, options) {
     return {
         update: newOptions => {
             currentOptions = newOptions;
-            zone.update({
-                ...currentOptions,
-                ...getAddedOptions(isItemsDragDisabled.get())
-            });
+            // keep store in sync with external prop
+            userDragDisabled.set(currentOptions?.dragDisabled ?? false);
+            updateZone();
         },
         destroy: () => {
             node.removeEventListener("consider", consider);
             node.removeEventListener("finalize", finalize);
-            isItemsDragDisabled.unsubscribe(isItemDisabledCB);
+            isItemsDragDisabled.unsubscribe(updateZone);
         }
     };
 }
@@ -100,10 +112,22 @@ export function dragHandle(handle) {
         window.removeEventListener("touchend", resetStartDrag);
     }
 
-    isItemsDragDisabled.subscribe(disabled => {
-        handle.tabIndex = disabled ? 0 : -1;
-        handle.style.cursor = disabled ? "grab" : "grabbing";
-    });
+    const recomputeHandleState = () => {
+        const userDisabled = userDragDisabled.get();
+        const internalDisabled = isItemsDragDisabled.get();
+
+        if (userDisabled) {
+            handle.tabIndex = -1;
+            handle.style.cursor = ""; // default cursor
+        } else {
+            handle.tabIndex = internalDisabled ? 0 : -1;
+            handle.style.cursor = internalDisabled ? "grab" : "grabbing";
+        }
+    };
+
+    // Subscribe to both stores
+    userDragDisabled.subscribe(recomputeHandleState);
+    isItemsDragDisabled.subscribe(recomputeHandleState);
 
     handle.addEventListener("mousedown", startDrag);
     handle.addEventListener("touchstart", startDrag);
@@ -114,6 +138,8 @@ export function dragHandle(handle) {
             handle.removeEventListener("mousedown", startDrag);
             handle.removeEventListener("touchstart", startDrag);
             handle.removeEventListener("keydown", handleKeyDown);
+            userDragDisabled.unsubscribe(recomputeHandleState);
+            isItemsDragDisabled.unsubscribe(recomputeHandleState);
         }
     };
 }