svelte-dnd-action 0.9.62 → 0.9.64

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

@@ -647,6 +647,32 @@
         indexOfMin = _i;
       }
     }
+
+    // -------- Phantom slot check --------
+    // Regardless of layout (simple vertical list, flex-wrap, grid, floats …) the
+    // visually closest drop target can be *after* the current last **real** child.
+    // In simple layouts the would be index from the existing children would always be the last index
+    // but in more complex layouts (flex-wrap, grid, floats …) it can be any index.
+    // The problem is we can't predict where an additional element would be rendered in the general case,
+    // We therefore create a temporary, invisible clone of that last element, let
+    // the browser position it, measure the distance, and remove it immediately
+    // (same task → no paint).  This leaves `children` back in its original state
+    // before we exit the function, so existing index-caching logic and shadow-
+    // element bookkeeping continue to work unchanged.
+    if (children.length > 0) {
+      var originalLen = children.length; // before we append the phantom
+      var template = children[originalLen - 1];
+      var phantom = template.cloneNode(false); // shallow clone is enough for size
+      phantom.style.visibility = "hidden";
+      phantom.style.pointerEvents = "none";
+      collectionBelowEl.appendChild(phantom);
+      var phantomDistance = calcDistanceBetweenCenters(floatingAboveEl, phantom);
+      if (phantomDistance < minDistanceSoFar) {
+        indexOfMin = originalLen; // index of phantom slot in original list
+      }
+
+      collectionBelowEl.removeChild(phantom);
+    }
     return {
       index: indexOfMin,
       isProximityBased: true
@@ -1331,6 +1357,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 +1378,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();
@@ -1482,10 +1511,7 @@
         source: SOURCES.POINTER
       });
     }
-    var _e$detail$indexObj = e.detail.indexObj,
-      index = _e$detail$indexObj.index,
-      isProximityBased = _e$detail$indexObj.isProximityBased;
-    var shadowElIdx = isProximityBased && index === e.currentTarget.children.length - 1 ? index + 1 : index;
+    var shadowElIdx = e.detail.indexObj.index;
     shadowElDropZone = e.currentTarget;
     items.splice(shadowElIdx, 0, shadowElData);
     dispatchConsiderEvent(e.currentTarget, items, {
@@ -1673,19 +1699,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 +1720,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 +1751,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 +1780,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 +1803,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 +1856,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 +1976,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 +2588,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 +2607,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 +2662,7 @@
       options.transformDraggedElement;
       options.autoAriaDisabled;
       options.centreDraggedOnCursor;
+      var delayTouchStart = options.delayTouchStart;
       options.dropAnimationDisabled;
       var rest = _objectWithoutProperties(options, _excluded);
     /*eslint-enable*/
@@ -2598,6 +2687,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) {

package/dist/index.mjs

@@ -641,6 +641,32 @@ function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
       indexOfMin = _i;
     }
   }
+
+  // -------- Phantom slot check --------
+  // Regardless of layout (simple vertical list, flex-wrap, grid, floats …) the
+  // visually closest drop target can be *after* the current last **real** child.
+  // In simple layouts the would be index from the existing children would always be the last index
+  // but in more complex layouts (flex-wrap, grid, floats …) it can be any index.
+  // The problem is we can't predict where an additional element would be rendered in the general case,
+  // We therefore create a temporary, invisible clone of that last element, let
+  // the browser position it, measure the distance, and remove it immediately
+  // (same task → no paint).  This leaves `children` back in its original state
+  // before we exit the function, so existing index-caching logic and shadow-
+  // element bookkeeping continue to work unchanged.
+  if (children.length > 0) {
+    var originalLen = children.length; // before we append the phantom
+    var template = children[originalLen - 1];
+    var phantom = template.cloneNode(false); // shallow clone is enough for size
+    phantom.style.visibility = "hidden";
+    phantom.style.pointerEvents = "none";
+    collectionBelowEl.appendChild(phantom);
+    var phantomDistance = calcDistanceBetweenCenters(floatingAboveEl, phantom);
+    if (phantomDistance < minDistanceSoFar) {
+      indexOfMin = originalLen; // index of phantom slot in original list
+    }
+
+    collectionBelowEl.removeChild(phantom);
+  }
   return {
     index: indexOfMin,
     isProximityBased: true
@@ -1325,6 +1351,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 +1372,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();
@@ -1476,10 +1505,7 @@ function handleDraggedEntered(e) {
       source: SOURCES.POINTER
     });
   }
-  var _e$detail$indexObj = e.detail.indexObj,
-    index = _e$detail$indexObj.index,
-    isProximityBased = _e$detail$indexObj.isProximityBased;
-  var shadowElIdx = isProximityBased && index === e.currentTarget.children.length - 1 ? index + 1 : index;
+  var shadowElIdx = e.detail.indexObj.index;
   shadowElDropZone = e.currentTarget;
   items.splice(shadowElIdx, 0, shadowElData);
   dispatchConsiderEvent(e.currentTarget, items, {
@@ -1667,19 +1693,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 +1714,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 +1745,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 +1774,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 +1797,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 +1850,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 +1970,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 +2582,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 +2601,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 +2656,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 +2681,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) {

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.62",
+    "version": "0.9.64",
     "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/helpers/listUtil.js

@@ -77,5 +77,33 @@ export function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
             indexOfMin = i;
         }
     }
+
+    // -------- Phantom slot check --------
+    // Regardless of layout (simple vertical list, flex-wrap, grid, floats …) the
+    // visually closest drop target can be *after* the current last **real** child.
+    // In simple layouts the would be index from the existing children would always be the last index
+    // but in more complex layouts (flex-wrap, grid, floats …) it can be any index.
+    // The problem is we can't predict where an additional element would be rendered in the general case,
+    // We therefore create a temporary, invisible clone of that last element, let
+    // the browser position it, measure the distance, and remove it immediately
+    // (same task → no paint).  This leaves `children` back in its original state
+    // before we exit the function, so existing index-caching logic and shadow-
+    // element bookkeeping continue to work unchanged.
+    if (children.length > 0) {
+        const originalLen = children.length; // before we append the phantom
+        const template = children[originalLen - 1];
+        const phantom = template.cloneNode(false); // shallow clone is enough for size
+        phantom.style.visibility = "hidden";
+        phantom.style.pointerEvents = "none";
+        collectionBelowEl.appendChild(phantom);
+
+        const phantomDistance = calcDistanceBetweenCenters(floatingAboveEl, phantom);
+        if (phantomDistance < minDistanceSoFar) {
+            indexOfMin = originalLen; // index of phantom slot in original list
+        }
+
+        collectionBelowEl.removeChild(phantom);
+    }
+
     return {index: indexOfMin, isProximityBased: true};
 }

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();
@@ -151,8 +154,7 @@ function handleDraggedEntered(e) {
             source: SOURCES.POINTER
         });
     }
-    const {index, isProximityBased} = e.detail.indexObj;
-    const shadowElIdx = isProximityBased && index === e.currentTarget.children.length - 1 ? index + 1 : index;
+    const {index: shadowElIdx} = e.detail.indexObj;
     shadowElDropZone = e.currentTarget;
     items.splice(shadowElIdx, 0, shadowElData);
     dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_ENTERED, id: draggedElData[ITEM_ID_KEY], source: SOURCES.POINTER});
@@ -310,16 +312,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 +334,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 +362,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 +379,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 +403,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 +451,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 +546,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);
         }