svelte-dnd-action 0.9.71 → 0.9.73

package/dist/index.js

@@ -1186,6 +1186,21 @@
   function trs(property) {
     return "".concat(property, " ").concat(TRANSITION_DURATION_SECONDS, "s ease");
   }
+
+  /**
+   * Adds the size transitions after the dragged element's initial styles have been applied.
+   * This normally happens in a timeout to avoid a browser rendering bug, but a synchronous
+   * first morph can happen before that timeout and needs the transitions immediately.
+   * @param {HTMLElement} draggedEl
+   */
+  function ensureMorphSizeTransitions(draggedEl) {
+    var transitionProperties = draggedEl.style.transitionProperty.split(",").map(function (property) {
+      return property.trim();
+    });
+    if (transitionProperties.includes("all")) return;
+    if (!transitionProperties.includes("width")) draggedEl.style.transition += ", ".concat(trs("width"));
+    if (!transitionProperties.includes("height")) draggedEl.style.transition += ", ".concat(trs("height"));
+  }
   /**
    * clones the given element and applies proper styles and transitions to the dragged element
    * @param {HTMLElement} originalElement
@@ -1219,7 +1234,7 @@
     draggedEl.style.transition = "".concat(trs("top"), ", ").concat(trs("left"), ", ").concat(trs("background-color"), ", ").concat(trs("opacity"), ", ").concat(trs("color"), " ");
     // this is a workaround for a strange browser bug that causes the right border to disappear when all the transitions are added at the same time
     window.setTimeout(function () {
-      return draggedEl.style.transition += ", ".concat(trs("width"), ", ").concat(trs("height"));
+      return ensureMorphSizeTransitions(draggedEl);
     }, 0);
     draggedEl.style.zIndex = "9999";
     draggedEl.style.cursor = "grabbing";
@@ -1242,22 +1257,26 @@
    * @param {number} currentMouseY
    */
   function morphDraggedElementToBeLike(draggedEl, copyFromEl, currentMouseX, currentMouseY) {
+    ensureMorphSizeTransitions(draggedEl);
     copyStylesFromTo(copyFromEl, draggedEl);
     var newRect = copyFromEl.getBoundingClientRect();
     var draggedElRect = draggedEl.getBoundingClientRect();
+    var draggedElComputedStyle = window.getComputedStyle(draggedEl);
+    var currentLeft = parseFloat(draggedElComputedStyle.left);
+    var currentTop = parseFloat(draggedElComputedStyle.top);
     var widthChange = newRect.width - draggedElRect.width;
     var heightChange = newRect.height - draggedElRect.height;
     if (widthChange || heightChange) {
       var relativeDistanceOfMousePointerFromDraggedSides = {
-        left: (currentMouseX - draggedElRect.left) / draggedElRect.width,
-        top: (currentMouseY - draggedElRect.top) / draggedElRect.height
+        left: draggedElRect.width ? (currentMouseX - draggedElRect.left) / draggedElRect.width : 0,
+        top: draggedElRect.height ? (currentMouseY - draggedElRect.top) / draggedElRect.height : 0
       };
       if (!getFeatureFlag(FEATURE_FLAG_NAMES.USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT)) {
         draggedEl.style.height = "".concat(newRect.height, "px");
         draggedEl.style.width = "".concat(newRect.width, "px");
       }
-      draggedEl.style.left = "".concat(parseFloat(draggedEl.style.left) - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange, "px");
-      draggedEl.style.top = "".concat(parseFloat(draggedEl.style.top) - relativeDistanceOfMousePointerFromDraggedSides.top * heightChange, "px");
+      draggedEl.style.left = "".concat(currentLeft - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange, "px");
+      draggedEl.style.top = "".concat(currentTop - relativeDistanceOfMousePointerFromDraggedSides.top * heightChange, "px");
     }
   }
 
@@ -1413,6 +1432,8 @@
   var touchDragHoldTimer;
   var touchHoldElapsed = false;
   var useCursorForDetectionActive = false;
+  var pendingDragOwner;
+  var watchedDropZones = new Set();
 
   // a map from type to a set of drop-zones
   var typeToDropZones$1 = new Map();
@@ -1435,9 +1456,10 @@
     }
   }
   function unregisterDropZone$1(dropZoneEl, type) {
-    typeToDropZones$1.get(type)["delete"](dropZoneEl);
+    var dropZones = typeToDropZones$1.get(type);
+    if (!dropZones || !dropZones["delete"](dropZoneEl)) return;
     decrementActiveDropZoneCount();
-    if (typeToDropZones$1.get(type).size === 0) {
+    if (dropZones.size === 0) {
       typeToDropZones$1["delete"](type);
     }
   }
@@ -1448,7 +1470,10 @@
       return "watching dragged element";
     });
     var dropZones = typeToDropZones$1.get(draggedElType);
-    var _iterator = _createForOfIteratorHelper(dropZones),
+    if (!dropZones || dropZones.size === 0) return;
+    if (watchedDropZones.size > 0) unWatchDraggedElement();
+    watchedDropZones = new Set(dropZones);
+    var _iterator = _createForOfIteratorHelper(watchedDropZones),
       _step;
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
@@ -1465,11 +1490,11 @@
     window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop$1);
 
     // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
-    var setIntervalMs = Math.max.apply(Math, _toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
+    var setIntervalMs = Math.max.apply(Math, _toConsumableArray(Array.from(watchedDropZones).map(function (dz) {
       return dzToConfig$1.get(dz).dropAnimationDurationMs;
     })));
     var observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); // if setIntervalMs is 0 it goes to 20, otherwise it is max between it and min observation.
-    multiScroller = createMultiScroller(dropZones, function () {
+    multiScroller = createMultiScroller(watchedDropZones, function () {
       return currentMousePosition;
     });
     // Returns reference point in document coordinates - either cursor position or element center
@@ -1481,14 +1506,13 @@
     } : function () {
       return findCenterOfElement(draggedEl);
     };
-    observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller, getReferencePoint);
+    observe(draggedEl, watchedDropZones, observationIntervalMs * 1.07, multiScroller, getReferencePoint);
   }
   function unWatchDraggedElement() {
     printDebug(function () {
       return "unwatching dragged element";
     });
-    var dropZones = typeToDropZones$1.get(draggedElType);
-    var _iterator2 = _createForOfIteratorHelper(dropZones),
+    var _iterator2 = _createForOfIteratorHelper(watchedDropZones),
       _step2;
     try {
       for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
@@ -1502,6 +1526,7 @@
     } finally {
       _iterator2.f();
     }
+    watchedDropZones = new Set();
     window.removeEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop$1);
     // ensuring multiScroller is not already destroyed before destroying
     if (multiScroller) {
@@ -1733,11 +1758,13 @@
     window.setTimeout(callback, dropAnimationDurationMs);
   }
   function scheduleDZForRemovalAfterDrop(dz, destroy) {
-    scheduledForRemovalAfterDrop.push({
+    var scheduledRemoval = {
       dz: dz,
       destroy: destroy
-    });
+    };
+    scheduledForRemovalAfterDrop.push(scheduledRemoval);
     window.requestAnimationFrame(function () {
+      if (!scheduledForRemovalAfterDrop.includes(scheduledRemoval)) return;
       hideElement(dz);
       document.body.appendChild(dz);
     });
@@ -1771,6 +1798,7 @@
     touchDragHoldTimer = undefined;
     touchHoldElapsed = false;
     useCursorForDetectionActive = false;
+    pendingDragOwner = undefined;
     if (scheduledForRemovalAfterDrop.length) {
       printDebug(function () {
         return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
@@ -1786,6 +1814,7 @@
   }
   function dndzone$2(node, options) {
     var initialized = false;
+    var destroyed = false;
     var config = {
       items: undefined,
       type: undefined,
@@ -1833,11 +1862,17 @@
         touchHoldElapsed = false;
       }
     }
-    function handleFalseAlarm(e) {
+    function cancelPendingDrag() {
+      if (pendingDragOwner !== node) return;
       removeMaybeListeners();
+      pendingDragOwner = undefined;
       originalDragTarget = undefined;
       dragStartMousePosition = undefined;
       currentMousePosition = undefined;
+    }
+    function handleFalseAlarm(e) {
+      if (pendingDragOwner !== node) return;
+      cancelPendingDrag();
 
       // dragging initiated by touch events prevents onclick from initially firing
       if (e.type === "touchend") {
@@ -1850,6 +1885,7 @@
       }
     }
     function handleMouseMoveMaybeDragStart(e) {
+      if (destroyed || pendingDragOwner !== node) return;
       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
@@ -1878,7 +1914,6 @@
         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) {
-        removeMaybeListeners();
         handleDragStart();
       }
     }
@@ -1897,9 +1932,9 @@
         });
         return;
       }
-      if (isWorkingOnPreviousDrag) {
+      if (destroyed || isWorkingOnPreviousDrag || pendingDragOwner) {
         printDebug(function () {
-          return "cannot start a new drag before finalizing previous one";
+          return "cannot start a new drag before finalizing the current drag or pending gesture";
         });
         return;
       }
@@ -1909,6 +1944,7 @@
         e.preventDefault();
       }
       e.stopPropagation();
+      pendingDragOwner = node;
       var c = isTouchStart ? e.touches[0] : e;
       dragStartMousePosition = {
         x: c.clientX,
@@ -1917,18 +1953,25 @@
       currentMousePosition = _objectSpread2({}, dragStartMousePosition);
       originalDragTarget = e.currentTarget;
       if (useDelay) {
+        var pendingTarget = originalDragTarget;
         touchHoldElapsed = false;
         touchDragHoldTimer = window.setTimeout(function () {
-          // If the finger is still down and no false-alarm happened
-          if (!originalDragTarget) return;
+          // If this action still owns the same pending gesture, transition it to a drag.
+          if (destroyed || pendingDragOwner !== node || originalDragTarget !== pendingTarget) return;
           touchHoldElapsed = true;
-          removeMaybeListeners();
           handleDragStart();
         }, config.delayTouchStartMs);
       }
       addMaybeListeners();
     }
     function handleDragStart() {
+      var _originalDragTarget;
+      if (destroyed || pendingDragOwner !== node || isWorkingOnPreviousDrag || !((_originalDragTarget = originalDragTarget) !== null && _originalDragTarget !== void 0 && _originalDragTarget.parentElement)) {
+        cancelPendingDrag();
+        return;
+      }
+      removeMaybeListeners();
+      pendingDragOwner = undefined;
       printDebug(function () {
         return ["drag start config: ".concat(toString(config)), originalDragTarget];
       });
@@ -2127,11 +2170,29 @@
         configure(newOptions);
       },
       destroy: function destroy() {
+        if (destroyed) return;
+        destroyed = true;
+        cancelPendingDrag();
+        var _iterator3 = _createForOfIteratorHelper(node.children),
+          _step3;
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            var draggableEl = _step3.value;
+            draggableEl.removeEventListener("mousedown", elToMouseDownListener.get(draggableEl));
+            draggableEl.removeEventListener("touchstart", elToMouseDownListener.get(draggableEl));
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
         function destroyDz() {
           printDebug(function () {
             return "pointer dndzone will destroy";
           });
-          unregisterDropZone$1(node, dzToConfig$1.get(node).type);
+          var registeredConfig = dzToConfig$1.get(node);
+          if (!registeredConfig) return;
+          unregisterDropZone$1(node, registeredConfig.type);
           dzToConfig$1["delete"](node);
         }
         if (isWorkingOnPreviousDrag && !node.closest("[".concat(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, "]"))) {
@@ -2288,12 +2349,13 @@
     printDebug(function () {
       return "unregistering drop-zone";
     });
-    if (focusedDz === dropZoneEl) {
+    if (isDragging && focusedDz === dropZoneEl) {
       handleDrop();
     }
-    typeToDropZones.get(type)["delete"](dropZoneEl);
+    var dropZones = typeToDropZones.get(type);
+    if (!dropZones || !dropZones["delete"](dropZoneEl)) return;
     decrementActiveDropZoneCount();
-    if (typeToDropZones.get(type).size === 0) {
+    if (dropZones.size === 0) {
       typeToDropZones["delete"](type);
     }
     if (typeToDropZones.size === 0) {
@@ -2355,17 +2417,20 @@
       }
     }
     var dzFrom = focusedDz;
+    var movedItemId = focusedItemId;
+    focusedDz = newlyFocusedDz;
     dispatchFinalizeEvent(dzFrom, originItems, {
       trigger: TRIGGERS.DROPPED_INTO_ANOTHER,
-      id: focusedItemId,
-      source: SOURCES.KEYBOARD
-    });
-    dispatchFinalizeEvent(newlyFocusedDz, targetItems, {
-      trigger: TRIGGERS.DROPPED_INTO_ZONE,
-      id: focusedItemId,
+      id: movedItemId,
       source: SOURCES.KEYBOARD
     });
-    focusedDz = newlyFocusedDz;
+    if (dzToConfig.has(newlyFocusedDz)) {
+      dispatchFinalizeEvent(newlyFocusedDz, targetItems, {
+        trigger: TRIGGERS.DROPPED_INTO_ZONE,
+        id: movedItemId,
+        source: SOURCES.KEYBOARD
+      });
+    }
   }
   function triggerAllDzsUpdate() {
     dzToHandles.forEach(function (_ref, dz) {
@@ -2375,27 +2440,23 @@
   }
   function handleDrop() {
     var dispatchConsider = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    if (!isDragging || !focusedDz) return;
     printDebug(function () {
       return "drop";
     });
-    if (!dzToConfig.get(focusedDz).autoAriaDisabled) {
+    var droppedDz = focusedDz;
+    var droppedConfig = dzToConfig.get(droppedDz);
+    var droppedItemId = focusedItemId;
+    var droppedItemType = draggedItemType;
+    if (!droppedConfig) return;
+    if (!droppedConfig.autoAriaDisabled) {
       alertToScreenReader("Stopped dragging item ".concat(focusedItemLabel));
     }
     if (allDragTargets.has(document.activeElement)) {
       document.activeElement.blur();
     }
-    if (dispatchConsider) {
-      dispatchConsiderEvent(focusedDz, dzToConfig.get(focusedDz).items, {
-        trigger: TRIGGERS.DRAG_STOPPED,
-        id: focusedItemId,
-        source: SOURCES.KEYBOARD
-      });
-    }
-    styleInactiveDropZones(typeToDropZones.get(draggedItemType), function (dz) {
-      return dzToConfig.get(dz).dropTargetStyle;
-    }, function (dz) {
-      return dzToConfig.get(dz).dropTargetClasses;
-    });
+    // Clear global drag state before dispatching. A synchronous handler may destroy the
+    // focused zone, and unregisterDropZone must not recursively enter handleDrop.
     focusedItem = null;
     focusedItemId = null;
     focusedItemLabel = "";
@@ -2403,10 +2464,26 @@
     focusedDz = null;
     focusedDzLabel = "";
     isDragging = false;
+    if (dispatchConsider) {
+      dispatchConsiderEvent(droppedDz, droppedConfig.items, {
+        trigger: TRIGGERS.DRAG_STOPPED,
+        id: droppedItemId,
+        source: SOURCES.KEYBOARD
+      });
+    }
+    var dropZones = typeToDropZones.get(droppedItemType);
+    if (dropZones) {
+      styleInactiveDropZones(dropZones, function (dz) {
+        return dzToConfig.get(dz).dropTargetStyle;
+      }, function (dz) {
+        return dzToConfig.get(dz).dropTargetClasses;
+      });
+    }
     triggerAllDzsUpdate();
   }
   //////
   function dndzone$1(node, options) {
+    var destroyed = false;
     var config = {
       items: undefined,
       type: undefined,
@@ -2631,9 +2708,25 @@
         configure(newOptions);
       },
       destroy: function destroy() {
+        if (destroyed) return;
+        destroyed = true;
         printDebug(function () {
           return "keyboard dndzone will destroy";
         });
+        node.removeEventListener("focus", handleZoneFocus);
+        var _iterator = _createForOfIteratorHelper(node.children),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var draggableEl = _step.value;
+            draggableEl.removeEventListener("keydown", elToKeyDownListeners.get(draggableEl));
+            draggableEl.removeEventListener("click", elToFocusListeners.get(draggableEl));
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
         unregisterDropZone(node, config.type);
         dzToConfig["delete"](node);
         dzToHandles["delete"](node);
@@ -2842,6 +2935,8 @@
         updateZone();
       },
       destroy: function destroy() {
+        isItemsDragDisabled.set(true);
+        zone.destroy();
         node.removeEventListener("consider", consider);
         node.removeEventListener("finalize", finalize);
         isItemsDragDisabled.unsubscribe(updateZone);

package/dist/index.mjs

@@ -1180,6 +1180,21 @@ var TRANSITION_DURATION_SECONDS = 0.2;
 function trs(property) {
   return "".concat(property, " ").concat(TRANSITION_DURATION_SECONDS, "s ease");
 }
+
+/**
+ * Adds the size transitions after the dragged element's initial styles have been applied.
+ * This normally happens in a timeout to avoid a browser rendering bug, but a synchronous
+ * first morph can happen before that timeout and needs the transitions immediately.
+ * @param {HTMLElement} draggedEl
+ */
+function ensureMorphSizeTransitions(draggedEl) {
+  var transitionProperties = draggedEl.style.transitionProperty.split(",").map(function (property) {
+    return property.trim();
+  });
+  if (transitionProperties.includes("all")) return;
+  if (!transitionProperties.includes("width")) draggedEl.style.transition += ", ".concat(trs("width"));
+  if (!transitionProperties.includes("height")) draggedEl.style.transition += ", ".concat(trs("height"));
+}
 /**
  * clones the given element and applies proper styles and transitions to the dragged element
  * @param {HTMLElement} originalElement
@@ -1213,7 +1228,7 @@ function createDraggedElementFrom(originalElement, positionCenterOnXY) {
   draggedEl.style.transition = "".concat(trs("top"), ", ").concat(trs("left"), ", ").concat(trs("background-color"), ", ").concat(trs("opacity"), ", ").concat(trs("color"), " ");
   // this is a workaround for a strange browser bug that causes the right border to disappear when all the transitions are added at the same time
   window.setTimeout(function () {
-    return draggedEl.style.transition += ", ".concat(trs("width"), ", ").concat(trs("height"));
+    return ensureMorphSizeTransitions(draggedEl);
   }, 0);
   draggedEl.style.zIndex = "9999";
   draggedEl.style.cursor = "grabbing";
@@ -1236,22 +1251,26 @@ function moveDraggedElementToWasDroppedState(draggedEl) {
  * @param {number} currentMouseY
  */
 function morphDraggedElementToBeLike(draggedEl, copyFromEl, currentMouseX, currentMouseY) {
+  ensureMorphSizeTransitions(draggedEl);
   copyStylesFromTo(copyFromEl, draggedEl);
   var newRect = copyFromEl.getBoundingClientRect();
   var draggedElRect = draggedEl.getBoundingClientRect();
+  var draggedElComputedStyle = window.getComputedStyle(draggedEl);
+  var currentLeft = parseFloat(draggedElComputedStyle.left);
+  var currentTop = parseFloat(draggedElComputedStyle.top);
   var widthChange = newRect.width - draggedElRect.width;
   var heightChange = newRect.height - draggedElRect.height;
   if (widthChange || heightChange) {
     var relativeDistanceOfMousePointerFromDraggedSides = {
-      left: (currentMouseX - draggedElRect.left) / draggedElRect.width,
-      top: (currentMouseY - draggedElRect.top) / draggedElRect.height
+      left: draggedElRect.width ? (currentMouseX - draggedElRect.left) / draggedElRect.width : 0,
+      top: draggedElRect.height ? (currentMouseY - draggedElRect.top) / draggedElRect.height : 0
     };
     if (!getFeatureFlag(FEATURE_FLAG_NAMES.USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT)) {
       draggedEl.style.height = "".concat(newRect.height, "px");
       draggedEl.style.width = "".concat(newRect.width, "px");
     }
-    draggedEl.style.left = "".concat(parseFloat(draggedEl.style.left) - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange, "px");
-    draggedEl.style.top = "".concat(parseFloat(draggedEl.style.top) - relativeDistanceOfMousePointerFromDraggedSides.top * heightChange, "px");
+    draggedEl.style.left = "".concat(currentLeft - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange, "px");
+    draggedEl.style.top = "".concat(currentTop - relativeDistanceOfMousePointerFromDraggedSides.top * heightChange, "px");
   }
 }
 
@@ -1407,6 +1426,8 @@ var multiScroller;
 var touchDragHoldTimer;
 var touchHoldElapsed = false;
 var useCursorForDetectionActive = false;
+var pendingDragOwner;
+var watchedDropZones = new Set();
 
 // a map from type to a set of drop-zones
 var typeToDropZones$1 = new Map();
@@ -1429,9 +1450,10 @@ function registerDropZone$1(dropZoneEl, type) {
   }
 }
 function unregisterDropZone$1(dropZoneEl, type) {
-  typeToDropZones$1.get(type)["delete"](dropZoneEl);
+  var dropZones = typeToDropZones$1.get(type);
+  if (!dropZones || !dropZones["delete"](dropZoneEl)) return;
   decrementActiveDropZoneCount();
-  if (typeToDropZones$1.get(type).size === 0) {
+  if (dropZones.size === 0) {
     typeToDropZones$1["delete"](type);
   }
 }
@@ -1442,7 +1464,10 @@ function watchDraggedElement() {
     return "watching dragged element";
   });
   var dropZones = typeToDropZones$1.get(draggedElType);
-  var _iterator = _createForOfIteratorHelper(dropZones),
+  if (!dropZones || dropZones.size === 0) return;
+  if (watchedDropZones.size > 0) unWatchDraggedElement();
+  watchedDropZones = new Set(dropZones);
+  var _iterator = _createForOfIteratorHelper(watchedDropZones),
     _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
@@ -1459,11 +1484,11 @@ function watchDraggedElement() {
   window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop$1);
 
   // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
-  var setIntervalMs = Math.max.apply(Math, _toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
+  var setIntervalMs = Math.max.apply(Math, _toConsumableArray(Array.from(watchedDropZones).map(function (dz) {
     return dzToConfig$1.get(dz).dropAnimationDurationMs;
   })));
   var observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); // if setIntervalMs is 0 it goes to 20, otherwise it is max between it and min observation.
-  multiScroller = createMultiScroller(dropZones, function () {
+  multiScroller = createMultiScroller(watchedDropZones, function () {
     return currentMousePosition;
   });
   // Returns reference point in document coordinates - either cursor position or element center
@@ -1475,14 +1500,13 @@ function watchDraggedElement() {
   } : function () {
     return findCenterOfElement(draggedEl);
   };
-  observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller, getReferencePoint);
+  observe(draggedEl, watchedDropZones, observationIntervalMs * 1.07, multiScroller, getReferencePoint);
 }
 function unWatchDraggedElement() {
   printDebug(function () {
     return "unwatching dragged element";
   });
-  var dropZones = typeToDropZones$1.get(draggedElType);
-  var _iterator2 = _createForOfIteratorHelper(dropZones),
+  var _iterator2 = _createForOfIteratorHelper(watchedDropZones),
     _step2;
   try {
     for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
@@ -1496,6 +1520,7 @@ function unWatchDraggedElement() {
   } finally {
     _iterator2.f();
   }
+  watchedDropZones = new Set();
   window.removeEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop$1);
   // ensuring multiScroller is not already destroyed before destroying
   if (multiScroller) {
@@ -1727,11 +1752,13 @@ function animateDraggedToFinalPosition(shadowElIdx, callback) {
   window.setTimeout(callback, dropAnimationDurationMs);
 }
 function scheduleDZForRemovalAfterDrop(dz, destroy) {
-  scheduledForRemovalAfterDrop.push({
+  var scheduledRemoval = {
     dz: dz,
     destroy: destroy
-  });
+  };
+  scheduledForRemovalAfterDrop.push(scheduledRemoval);
   window.requestAnimationFrame(function () {
+    if (!scheduledForRemovalAfterDrop.includes(scheduledRemoval)) return;
     hideElement(dz);
     document.body.appendChild(dz);
   });
@@ -1765,6 +1792,7 @@ function cleanupPostDrop() {
   touchDragHoldTimer = undefined;
   touchHoldElapsed = false;
   useCursorForDetectionActive = false;
+  pendingDragOwner = undefined;
   if (scheduledForRemovalAfterDrop.length) {
     printDebug(function () {
       return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
@@ -1780,6 +1808,7 @@ function cleanupPostDrop() {
 }
 function dndzone$2(node, options) {
   var initialized = false;
+  var destroyed = false;
   var config = {
     items: undefined,
     type: undefined,
@@ -1827,11 +1856,17 @@ function dndzone$2(node, options) {
       touchHoldElapsed = false;
     }
   }
-  function handleFalseAlarm(e) {
+  function cancelPendingDrag() {
+    if (pendingDragOwner !== node) return;
     removeMaybeListeners();
+    pendingDragOwner = undefined;
     originalDragTarget = undefined;
     dragStartMousePosition = undefined;
     currentMousePosition = undefined;
+  }
+  function handleFalseAlarm(e) {
+    if (pendingDragOwner !== node) return;
+    cancelPendingDrag();
 
     // dragging initiated by touch events prevents onclick from initially firing
     if (e.type === "touchend") {
@@ -1844,6 +1879,7 @@ function dndzone$2(node, options) {
     }
   }
   function handleMouseMoveMaybeDragStart(e) {
+    if (destroyed || pendingDragOwner !== node) return;
     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
@@ -1872,7 +1908,6 @@ function dndzone$2(node, options) {
       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) {
-      removeMaybeListeners();
       handleDragStart();
     }
   }
@@ -1891,9 +1926,9 @@ function dndzone$2(node, options) {
       });
       return;
     }
-    if (isWorkingOnPreviousDrag) {
+    if (destroyed || isWorkingOnPreviousDrag || pendingDragOwner) {
       printDebug(function () {
-        return "cannot start a new drag before finalizing previous one";
+        return "cannot start a new drag before finalizing the current drag or pending gesture";
       });
       return;
     }
@@ -1903,6 +1938,7 @@ function dndzone$2(node, options) {
       e.preventDefault();
     }
     e.stopPropagation();
+    pendingDragOwner = node;
     var c = isTouchStart ? e.touches[0] : e;
     dragStartMousePosition = {
       x: c.clientX,
@@ -1911,18 +1947,25 @@ function dndzone$2(node, options) {
     currentMousePosition = _objectSpread2({}, dragStartMousePosition);
     originalDragTarget = e.currentTarget;
     if (useDelay) {
+      var pendingTarget = originalDragTarget;
       touchHoldElapsed = false;
       touchDragHoldTimer = window.setTimeout(function () {
-        // If the finger is still down and no false-alarm happened
-        if (!originalDragTarget) return;
+        // If this action still owns the same pending gesture, transition it to a drag.
+        if (destroyed || pendingDragOwner !== node || originalDragTarget !== pendingTarget) return;
         touchHoldElapsed = true;
-        removeMaybeListeners();
         handleDragStart();
       }, config.delayTouchStartMs);
     }
     addMaybeListeners();
   }
   function handleDragStart() {
+    var _originalDragTarget;
+    if (destroyed || pendingDragOwner !== node || isWorkingOnPreviousDrag || !((_originalDragTarget = originalDragTarget) !== null && _originalDragTarget !== void 0 && _originalDragTarget.parentElement)) {
+      cancelPendingDrag();
+      return;
+    }
+    removeMaybeListeners();
+    pendingDragOwner = undefined;
     printDebug(function () {
       return ["drag start config: ".concat(toString(config)), originalDragTarget];
     });
@@ -2121,11 +2164,29 @@ function dndzone$2(node, options) {
       configure(newOptions);
     },
     destroy: function destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      cancelPendingDrag();
+      var _iterator3 = _createForOfIteratorHelper(node.children),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var draggableEl = _step3.value;
+          draggableEl.removeEventListener("mousedown", elToMouseDownListener.get(draggableEl));
+          draggableEl.removeEventListener("touchstart", elToMouseDownListener.get(draggableEl));
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
       function destroyDz() {
         printDebug(function () {
           return "pointer dndzone will destroy";
         });
-        unregisterDropZone$1(node, dzToConfig$1.get(node).type);
+        var registeredConfig = dzToConfig$1.get(node);
+        if (!registeredConfig) return;
+        unregisterDropZone$1(node, registeredConfig.type);
         dzToConfig$1["delete"](node);
       }
       if (isWorkingOnPreviousDrag && !node.closest("[".concat(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, "]"))) {
@@ -2282,12 +2343,13 @@ function unregisterDropZone(dropZoneEl, type) {
   printDebug(function () {
     return "unregistering drop-zone";
   });
-  if (focusedDz === dropZoneEl) {
+  if (isDragging && focusedDz === dropZoneEl) {
     handleDrop();
   }
-  typeToDropZones.get(type)["delete"](dropZoneEl);
+  var dropZones = typeToDropZones.get(type);
+  if (!dropZones || !dropZones["delete"](dropZoneEl)) return;
   decrementActiveDropZoneCount();
-  if (typeToDropZones.get(type).size === 0) {
+  if (dropZones.size === 0) {
     typeToDropZones["delete"](type);
   }
   if (typeToDropZones.size === 0) {
@@ -2349,17 +2411,20 @@ function handleZoneFocus(e) {
     }
   }
   var dzFrom = focusedDz;
+  var movedItemId = focusedItemId;
+  focusedDz = newlyFocusedDz;
   dispatchFinalizeEvent(dzFrom, originItems, {
     trigger: TRIGGERS.DROPPED_INTO_ANOTHER,
-    id: focusedItemId,
-    source: SOURCES.KEYBOARD
-  });
-  dispatchFinalizeEvent(newlyFocusedDz, targetItems, {
-    trigger: TRIGGERS.DROPPED_INTO_ZONE,
-    id: focusedItemId,
+    id: movedItemId,
     source: SOURCES.KEYBOARD
   });
-  focusedDz = newlyFocusedDz;
+  if (dzToConfig.has(newlyFocusedDz)) {
+    dispatchFinalizeEvent(newlyFocusedDz, targetItems, {
+      trigger: TRIGGERS.DROPPED_INTO_ZONE,
+      id: movedItemId,
+      source: SOURCES.KEYBOARD
+    });
+  }
 }
 function triggerAllDzsUpdate() {
   dzToHandles.forEach(function (_ref, dz) {
@@ -2369,27 +2434,23 @@ function triggerAllDzsUpdate() {
 }
 function handleDrop() {
   var dispatchConsider = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  if (!isDragging || !focusedDz) return;
   printDebug(function () {
     return "drop";
   });
-  if (!dzToConfig.get(focusedDz).autoAriaDisabled) {
+  var droppedDz = focusedDz;
+  var droppedConfig = dzToConfig.get(droppedDz);
+  var droppedItemId = focusedItemId;
+  var droppedItemType = draggedItemType;
+  if (!droppedConfig) return;
+  if (!droppedConfig.autoAriaDisabled) {
     alertToScreenReader("Stopped dragging item ".concat(focusedItemLabel));
   }
   if (allDragTargets.has(document.activeElement)) {
     document.activeElement.blur();
   }
-  if (dispatchConsider) {
-    dispatchConsiderEvent(focusedDz, dzToConfig.get(focusedDz).items, {
-      trigger: TRIGGERS.DRAG_STOPPED,
-      id: focusedItemId,
-      source: SOURCES.KEYBOARD
-    });
-  }
-  styleInactiveDropZones(typeToDropZones.get(draggedItemType), function (dz) {
-    return dzToConfig.get(dz).dropTargetStyle;
-  }, function (dz) {
-    return dzToConfig.get(dz).dropTargetClasses;
-  });
+  // Clear global drag state before dispatching. A synchronous handler may destroy the
+  // focused zone, and unregisterDropZone must not recursively enter handleDrop.
   focusedItem = null;
   focusedItemId = null;
   focusedItemLabel = "";
@@ -2397,10 +2458,26 @@ function handleDrop() {
   focusedDz = null;
   focusedDzLabel = "";
   isDragging = false;
+  if (dispatchConsider) {
+    dispatchConsiderEvent(droppedDz, droppedConfig.items, {
+      trigger: TRIGGERS.DRAG_STOPPED,
+      id: droppedItemId,
+      source: SOURCES.KEYBOARD
+    });
+  }
+  var dropZones = typeToDropZones.get(droppedItemType);
+  if (dropZones) {
+    styleInactiveDropZones(dropZones, function (dz) {
+      return dzToConfig.get(dz).dropTargetStyle;
+    }, function (dz) {
+      return dzToConfig.get(dz).dropTargetClasses;
+    });
+  }
   triggerAllDzsUpdate();
 }
 //////
 function dndzone$1(node, options) {
+  var destroyed = false;
   var config = {
     items: undefined,
     type: undefined,
@@ -2625,9 +2702,25 @@ function dndzone$1(node, options) {
       configure(newOptions);
     },
     destroy: function destroy() {
+      if (destroyed) return;
+      destroyed = true;
       printDebug(function () {
         return "keyboard dndzone will destroy";
       });
+      node.removeEventListener("focus", handleZoneFocus);
+      var _iterator = _createForOfIteratorHelper(node.children),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var draggableEl = _step.value;
+          draggableEl.removeEventListener("keydown", elToKeyDownListeners.get(draggableEl));
+          draggableEl.removeEventListener("click", elToFocusListeners.get(draggableEl));
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
       unregisterDropZone(node, config.type);
       dzToConfig["delete"](node);
       dzToHandles["delete"](node);
@@ -2836,6 +2929,8 @@ function dragHandleZone(node, options) {
       updateZone();
     },
     destroy: function destroy() {
+      isItemsDragDisabled.set(true);
+      zone.destroy();
       node.removeEventListener("consider", consider);
       node.removeEventListener("finalize", finalize);
       isItemsDragDisabled.unsubscribe(updateZone);

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.71",
+    "version": "0.9.73",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/helpers/styler.js

@@ -13,6 +13,19 @@ const TRANSITION_DURATION_SECONDS = 0.2;
 function trs(property) {
     return `${property} ${TRANSITION_DURATION_SECONDS}s ease`;
 }
+
+/**
+ * Adds the size transitions after the dragged element's initial styles have been applied.
+ * This normally happens in a timeout to avoid a browser rendering bug, but a synchronous
+ * first morph can happen before that timeout and needs the transitions immediately.
+ * @param {HTMLElement} draggedEl
+ */
+function ensureMorphSizeTransitions(draggedEl) {
+    const transitionProperties = draggedEl.style.transitionProperty.split(",").map(property => property.trim());
+    if (transitionProperties.includes("all")) return;
+    if (!transitionProperties.includes("width")) draggedEl.style.transition += `, ${trs("width")}`;
+    if (!transitionProperties.includes("height")) draggedEl.style.transition += `, ${trs("height")}`;
+}
 /**
  * clones the given element and applies proper styles and transitions to the dragged element
  * @param {HTMLElement} originalElement
@@ -45,7 +58,7 @@ export function createDraggedElementFrom(originalElement, positionCenterOnXY) {
     draggedEl.style.width = `${rect.width}px`;
     draggedEl.style.transition = `${trs("top")}, ${trs("left")}, ${trs("background-color")}, ${trs("opacity")}, ${trs("color")} `;
     // this is a workaround for a strange browser bug that causes the right border to disappear when all the transitions are added at the same time
-    window.setTimeout(() => (draggedEl.style.transition += `, ${trs("width")}, ${trs("height")}`), 0);
+    window.setTimeout(() => ensureMorphSizeTransitions(draggedEl), 0);
     draggedEl.style.zIndex = "9999";
     draggedEl.style.cursor = "grabbing";
 
@@ -68,22 +81,26 @@ export function moveDraggedElementToWasDroppedState(draggedEl) {
  * @param {number} currentMouseY
  */
 export function morphDraggedElementToBeLike(draggedEl, copyFromEl, currentMouseX, currentMouseY) {
+    ensureMorphSizeTransitions(draggedEl);
     copyStylesFromTo(copyFromEl, draggedEl);
     const newRect = copyFromEl.getBoundingClientRect();
     const draggedElRect = draggedEl.getBoundingClientRect();
+    const draggedElComputedStyle = window.getComputedStyle(draggedEl);
+    const currentLeft = parseFloat(draggedElComputedStyle.left);
+    const currentTop = parseFloat(draggedElComputedStyle.top);
     const widthChange = newRect.width - draggedElRect.width;
     const heightChange = newRect.height - draggedElRect.height;
     if (widthChange || heightChange) {
         const relativeDistanceOfMousePointerFromDraggedSides = {
-            left: (currentMouseX - draggedElRect.left) / draggedElRect.width,
-            top: (currentMouseY - draggedElRect.top) / draggedElRect.height
+            left: draggedElRect.width ? (currentMouseX - draggedElRect.left) / draggedElRect.width : 0,
+            top: draggedElRect.height ? (currentMouseY - draggedElRect.top) / draggedElRect.height : 0
         };
         if (!getFeatureFlag(FEATURE_FLAG_NAMES.USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT)) {
             draggedEl.style.height = `${newRect.height}px`;
             draggedEl.style.width = `${newRect.width}px`;
         }
-        draggedEl.style.left = `${parseFloat(draggedEl.style.left) - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange}px`;
-        draggedEl.style.top = `${parseFloat(draggedEl.style.top) - relativeDistanceOfMousePointerFromDraggedSides.top * heightChange}px`;
+        draggedEl.style.left = `${currentLeft - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange}px`;
+        draggedEl.style.top = `${currentTop - relativeDistanceOfMousePointerFromDraggedSides.top * heightChange}px`;
     }
 }
 

package/src/keyboardAction.js

@@ -50,12 +50,13 @@ function registerDropZone(dropZoneEl, type) {
 }
 function unregisterDropZone(dropZoneEl, type) {
     printDebug(() => "unregistering drop-zone");
-    if (focusedDz === dropZoneEl) {
+    if (isDragging && focusedDz === dropZoneEl) {
         handleDrop();
     }
-    typeToDropZones.get(type).delete(dropZoneEl);
+    const dropZones = typeToDropZones.get(type);
+    if (!dropZones || !dropZones.delete(dropZoneEl)) return;
     decrementActiveDropZoneCount();
-    if (typeToDropZones.get(type).size === 0) {
+    if (dropZones.size === 0) {
         typeToDropZones.delete(type);
     }
     if (typeToDropZones.size === 0) {
@@ -112,9 +113,12 @@ function handleZoneFocus(e) {
         }
     }
     const dzFrom = focusedDz;
-    dispatchFinalizeEvent(dzFrom, originItems, {trigger: TRIGGERS.DROPPED_INTO_ANOTHER, id: focusedItemId, source: SOURCES.KEYBOARD});
-    dispatchFinalizeEvent(newlyFocusedDz, targetItems, {trigger: TRIGGERS.DROPPED_INTO_ZONE, id: focusedItemId, source: SOURCES.KEYBOARD});
+    const movedItemId = focusedItemId;
     focusedDz = newlyFocusedDz;
+    dispatchFinalizeEvent(dzFrom, originItems, {trigger: TRIGGERS.DROPPED_INTO_ANOTHER, id: movedItemId, source: SOURCES.KEYBOARD});
+    if (dzToConfig.has(newlyFocusedDz)) {
+        dispatchFinalizeEvent(newlyFocusedDz, targetItems, {trigger: TRIGGERS.DROPPED_INTO_ZONE, id: movedItemId, source: SOURCES.KEYBOARD});
+    }
 }
 
 function triggerAllDzsUpdate() {
@@ -122,25 +126,22 @@ function triggerAllDzsUpdate() {
 }
 
 function handleDrop(dispatchConsider = true) {
+    if (!isDragging || !focusedDz) return;
     printDebug(() => "drop");
-    if (!dzToConfig.get(focusedDz).autoAriaDisabled) {
+    const droppedDz = focusedDz;
+    const droppedConfig = dzToConfig.get(droppedDz);
+    const droppedItemId = focusedItemId;
+    const droppedItemType = draggedItemType;
+    if (!droppedConfig) return;
+
+    if (!droppedConfig.autoAriaDisabled) {
         alertToScreenReader(`Stopped dragging item ${focusedItemLabel}`);
     }
     if (allDragTargets.has(document.activeElement)) {
         document.activeElement.blur();
     }
-    if (dispatchConsider) {
-        dispatchConsiderEvent(focusedDz, dzToConfig.get(focusedDz).items, {
-            trigger: TRIGGERS.DRAG_STOPPED,
-            id: focusedItemId,
-            source: SOURCES.KEYBOARD
-        });
-    }
-    styleInactiveDropZones(
-        typeToDropZones.get(draggedItemType),
-        dz => dzToConfig.get(dz).dropTargetStyle,
-        dz => dzToConfig.get(dz).dropTargetClasses
-    );
+    // Clear global drag state before dispatching. A synchronous handler may destroy the
+    // focused zone, and unregisterDropZone must not recursively enter handleDrop.
     focusedItem = null;
     focusedItemId = null;
     focusedItemLabel = "";
@@ -148,10 +149,27 @@ function handleDrop(dispatchConsider = true) {
     focusedDz = null;
     focusedDzLabel = "";
     isDragging = false;
+
+    if (dispatchConsider) {
+        dispatchConsiderEvent(droppedDz, droppedConfig.items, {
+            trigger: TRIGGERS.DRAG_STOPPED,
+            id: droppedItemId,
+            source: SOURCES.KEYBOARD
+        });
+    }
+    const dropZones = typeToDropZones.get(droppedItemType);
+    if (dropZones) {
+        styleInactiveDropZones(
+            dropZones,
+            dz => dzToConfig.get(dz).dropTargetStyle,
+            dz => dzToConfig.get(dz).dropTargetClasses
+        );
+    }
     triggerAllDzsUpdate();
 }
 //////
 export function dndzone(node, options) {
+    let destroyed = false;
     const config = {
         items: undefined,
         type: undefined,
@@ -344,7 +362,14 @@ export function dndzone(node, options) {
             configure(newOptions);
         },
         destroy: () => {
+            if (destroyed) return;
+            destroyed = true;
             printDebug(() => "keyboard dndzone will destroy");
+            node.removeEventListener("focus", handleZoneFocus);
+            for (const draggableEl of node.children) {
+                draggableEl.removeEventListener("keydown", elToKeyDownListeners.get(draggableEl));
+                draggableEl.removeEventListener("click", elToFocusListeners.get(draggableEl));
+            }
             unregisterDropZone(node, config.type);
             dzToConfig.delete(node);
             dzToHandles.delete(node);

package/src/pointerAction.js

@@ -64,6 +64,8 @@ let multiScroller;
 let touchDragHoldTimer;
 let touchHoldElapsed = false;
 let useCursorForDetectionActive = false;
+let pendingDragOwner;
+let watchedDropZones = new Set();
 
 // a map from type to a set of drop-zones
 const typeToDropZones = new Map();
@@ -84,9 +86,10 @@ function registerDropZone(dropZoneEl, type) {
     }
 }
 function unregisterDropZone(dropZoneEl, type) {
-    typeToDropZones.get(type).delete(dropZoneEl);
+    const dropZones = typeToDropZones.get(type);
+    if (!dropZones || !dropZones.delete(dropZoneEl)) return;
     decrementActiveDropZoneCount();
-    if (typeToDropZones.get(type).size === 0) {
+    if (dropZones.size === 0) {
         typeToDropZones.delete(type);
     }
 }
@@ -95,8 +98,11 @@ function unregisterDropZone(dropZoneEl, type) {
 function watchDraggedElement() {
     printDebug(() => "watching dragged element");
     const dropZones = typeToDropZones.get(draggedElType);
+    if (!dropZones || dropZones.size === 0) return;
+    if (watchedDropZones.size > 0) unWatchDraggedElement();
+    watchedDropZones = new Set(dropZones);
 
-    for (const dz of dropZones) {
+    for (const dz of watchedDropZones) {
         dz.addEventListener(DRAGGED_ENTERED_EVENT_NAME, handleDraggedEntered);
         dz.addEventListener(DRAGGED_LEFT_EVENT_NAME, handleDraggedLeft);
         dz.addEventListener(DRAGGED_OVER_INDEX_EVENT_NAME, handleDraggedIsOverIndex);
@@ -104,9 +110,9 @@ function watchDraggedElement() {
     window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
 
     // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
-    const setIntervalMs = Math.max(...Array.from(dropZones.keys()).map(dz => dzToConfig.get(dz).dropAnimationDurationMs));
+    const setIntervalMs = Math.max(...Array.from(watchedDropZones).map(dz => dzToConfig.get(dz).dropAnimationDurationMs));
     const observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); // if setIntervalMs is 0 it goes to 20, otherwise it is max between it and min observation.
-    multiScroller = createMultiScroller(dropZones, () => currentMousePosition);
+    multiScroller = createMultiScroller(watchedDropZones, () => currentMousePosition);
     // Returns reference point in document coordinates - either cursor position or element center
     const getReferencePoint = useCursorForDetectionActive
         ? () => ({
@@ -114,16 +120,16 @@ function watchDraggedElement() {
               y: currentMousePosition.y + window.scrollY
           })
         : () => findCenterOfElement(draggedEl);
-    observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller, getReferencePoint);
+    observe(draggedEl, watchedDropZones, observationIntervalMs * 1.07, multiScroller, getReferencePoint);
 }
 function unWatchDraggedElement() {
     printDebug(() => "unwatching dragged element");
-    const dropZones = typeToDropZones.get(draggedElType);
-    for (const dz of dropZones) {
+    for (const dz of watchedDropZones) {
         dz.removeEventListener(DRAGGED_ENTERED_EVENT_NAME, handleDraggedEntered);
         dz.removeEventListener(DRAGGED_LEFT_EVENT_NAME, handleDraggedLeft);
         dz.removeEventListener(DRAGGED_OVER_INDEX_EVENT_NAME, handleDraggedIsOverIndex);
     }
+    watchedDropZones = new Set();
     window.removeEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
     // ensuring multiScroller is not already destroyed before destroying
     if (multiScroller) {
@@ -315,8 +321,10 @@ function animateDraggedToFinalPosition(shadowElIdx, callback) {
 }
 
 function scheduleDZForRemovalAfterDrop(dz, destroy) {
-    scheduledForRemovalAfterDrop.push({dz, destroy});
+    const scheduledRemoval = {dz, destroy};
+    scheduledForRemovalAfterDrop.push(scheduledRemoval);
     window.requestAnimationFrame(() => {
+        if (!scheduledForRemovalAfterDrop.includes(scheduledRemoval)) return;
         hideElement(dz);
         document.body.appendChild(dz);
     });
@@ -351,6 +359,7 @@ function cleanupPostDrop() {
     touchDragHoldTimer = undefined;
     touchHoldElapsed = false;
     useCursorForDetectionActive = false;
+    pendingDragOwner = undefined;
     if (scheduledForRemovalAfterDrop.length) {
         printDebug(() => ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop]);
         scheduledForRemovalAfterDrop.forEach(({dz, destroy}) => {
@@ -363,6 +372,7 @@ function cleanupPostDrop() {
 
 export function dndzone(node, options) {
     let initialized = false;
+    let destroyed = false;
     const config = {
         items: undefined,
         type: undefined,
@@ -398,11 +408,17 @@ export function dndzone(node, options) {
             touchHoldElapsed = false;
         }
     }
-    function handleFalseAlarm(e) {
+    function cancelPendingDrag() {
+        if (pendingDragOwner !== node) return;
         removeMaybeListeners();
+        pendingDragOwner = undefined;
         originalDragTarget = undefined;
         dragStartMousePosition = undefined;
         currentMousePosition = undefined;
+    }
+    function handleFalseAlarm(e) {
+        if (pendingDragOwner !== node) return;
+        cancelPendingDrag();
 
         // dragging initiated by touch events prevents onclick from initially firing
         if (e.type === "touchend") {
@@ -416,6 +432,7 @@ export function dndzone(node, options) {
     }
 
     function handleMouseMoveMaybeDragStart(e) {
+        if (destroyed || pendingDragOwner !== node) return;
         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
@@ -445,7 +462,6 @@ export function dndzone(node, options) {
             Math.abs(currentMousePosition.x - dragStartMousePosition.x) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX ||
             Math.abs(currentMousePosition.y - dragStartMousePosition.y) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX
         ) {
-            removeMaybeListeners();
             handleDragStart();
         }
     }
@@ -460,8 +476,8 @@ export function dndzone(node, options) {
             printDebug(() => `ignoring none left click button: ${e.button}`);
             return;
         }
-        if (isWorkingOnPreviousDrag) {
-            printDebug(() => "cannot start a new drag before finalizing previous one");
+        if (destroyed || isWorkingOnPreviousDrag || pendingDragOwner) {
+            printDebug(() => "cannot start a new drag before finalizing the current drag or pending gesture");
             return;
         }
         const isTouchStart = !!e.touches;
@@ -471,6 +487,7 @@ export function dndzone(node, options) {
             e.preventDefault();
         }
         e.stopPropagation();
+        pendingDragOwner = node;
 
         const c = isTouchStart ? e.touches[0] : e;
         dragStartMousePosition = {x: c.clientX, y: c.clientY};
@@ -478,12 +495,12 @@ export function dndzone(node, options) {
         originalDragTarget = e.currentTarget;
 
         if (useDelay) {
+            const pendingTarget = originalDragTarget;
             touchHoldElapsed = false;
             touchDragHoldTimer = window.setTimeout(() => {
-                // If the finger is still down and no false-alarm happened
-                if (!originalDragTarget) return;
+                // If this action still owns the same pending gesture, transition it to a drag.
+                if (destroyed || pendingDragOwner !== node || originalDragTarget !== pendingTarget) return;
                 touchHoldElapsed = true;
-                removeMaybeListeners();
                 handleDragStart();
             }, config.delayTouchStartMs);
         }
@@ -492,6 +509,12 @@ export function dndzone(node, options) {
     }
 
     function handleDragStart() {
+        if (destroyed || pendingDragOwner !== node || isWorkingOnPreviousDrag || !originalDragTarget?.parentElement) {
+            cancelPendingDrag();
+            return;
+        }
+        removeMaybeListeners();
+        pendingDragOwner = undefined;
         printDebug(() => [`drag start config: ${toString(config)}`, originalDragTarget]);
         isWorkingOnPreviousDrag = true;
 
@@ -670,9 +693,18 @@ export function dndzone(node, options) {
             configure(newOptions);
         },
         destroy: () => {
+            if (destroyed) return;
+            destroyed = true;
+            cancelPendingDrag();
+            for (const draggableEl of node.children) {
+                draggableEl.removeEventListener("mousedown", elToMouseDownListener.get(draggableEl));
+                draggableEl.removeEventListener("touchstart", elToMouseDownListener.get(draggableEl));
+            }
             function destroyDz() {
                 printDebug(() => "pointer dndzone will destroy");
-                unregisterDropZone(node, dzToConfig.get(node).type);
+                const registeredConfig = dzToConfig.get(node);
+                if (!registeredConfig) return;
+                unregisterDropZone(node, registeredConfig.type);
                 dzToConfig.delete(node);
             }
             if (isWorkingOnPreviousDrag && !node.closest(`[${ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE}]`)) {

package/src/wrappers/withDragHandles.js

@@ -77,6 +77,8 @@ export function dragHandleZone(node, options) {
             updateZone();
         },
         destroy: () => {
+            isItemsDragDisabled.set(true);
+            zone.destroy();
             node.removeEventListener("consider", consider);
             node.removeEventListener("finalize", finalize);
             isItemsDragDisabled.unsubscribe(updateZone);