svelte-dnd-action 0.9.41 → 0.9.43

package/README.md

@@ -372,6 +372,13 @@ This is an experimental feature added in version 0.9.29. If you have multiple le
 Specifically, it allows nested zones within the shadow element (the placeholder under the dragged element) to register and destroy.
 This is because Svelte calls nested actions before the parent action (opposite to the rendering order).
 You can use a data attribute **on the items** to help the lib prevent this: `data-is-dnd-shadow-item-hint={item[SHADOW_ITEM_MARKER_PROPERTY_NAME]} `
+Starting with version 0.9.42. if you use the hint make sure to include it in the key you provide in your each block e.g:
+
+```sveltehtml
+{#each columnItems as column (`${column._id}${column[SHADOW_ITEM_MARKER_PROPERTY_NAME] ? "_" + column[SHADOW_ITEM_MARKER_PROPERTY_NAME] : ""}`)}
+   ...
+{/each}
+```
 
 #### Simplified Example (just shows where to place the attribute):
 

package/dist/index.js

@@ -1439,7 +1439,7 @@
       return ["dragged left", e.currentTarget, e.detail];
     });
     var _dzToConfig$get2 = dzToConfig.get(e.currentTarget),
-      items = _dzToConfig$get2.items,
+      originalItems = _dzToConfig$get2.items,
       dropFromOthersDisabled = _dzToConfig$get2.dropFromOthersDisabled;
     if (dropFromOthersDisabled && e.currentTarget !== originDropZone && e.currentTarget !== shadowElDropZone) {
       printDebug(function () {
@@ -1447,10 +1447,12 @@
       });
       return;
     }
+    var items = _toConsumableArray(originalItems);
     var shadowElIdx = findShadowElementIdx(items);
     if (shadowElIdx !== -1) {
       items.splice(shadowElIdx, 1);
     }
+    var origShadowDz = shadowElDropZone;
     shadowElDropZone = undefined;
     var _e$detail = e.detail,
       type = _e$detail.type,
@@ -1461,7 +1463,8 @@
       });
       isDraggedOutsideOfAnyDz = true;
       shadowElDropZone = originDropZone;
-      var originZoneItems = dzToConfig.get(originDropZone).items;
+      // if the last zone it left is the origin dz, we will put it back into items (which we just removed it from)
+      var originZoneItems = origShadowDz === originDropZone ? items : _toConsumableArray(dzToConfig.get(originDropZone).items);
       originZoneItems.splice(originIndex, 0, shadowElData);
       dispatchConsiderEvent(originDropZone, originZoneItems, {
         trigger: TRIGGERS.DRAGGED_LEFT_ALL,
@@ -1481,7 +1484,7 @@
       return ["dragged is over index", e.currentTarget, e.detail];
     });
     var _dzToConfig$get3 = dzToConfig.get(e.currentTarget),
-      items = _dzToConfig$get3.items,
+      originalItems = _dzToConfig$get3.items,
       dropFromOthersDisabled = _dzToConfig$get3.dropFromOthersDisabled;
     if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
       printDebug(function () {
@@ -1489,6 +1492,7 @@
       });
       return;
     }
+    var items = _toConsumableArray(originalItems);
     isDraggedOutsideOfAnyDz = false;
     var index = e.detail.indexObj.index;
     var shadowElIdx = findShadowElementIdx(items);
@@ -1547,8 +1551,6 @@
     if (shadowElIdx === -1) {
       if (shadowElDropZone === originDropZone) {
         shadowElIdx = originIndex;
-      } else if (shadowElDropZone.children.length > 0) {
-        shadowElIdx = shadowElDropZone.children.length - 1;
       }
     }
     items = items.map(function (item) {
@@ -1572,12 +1574,12 @@
       if (shadowElIdx !== -1) unDecorateShadowElement(shadowElDropZone.children[shadowElIdx]);
       cleanupPostDrop();
     }
-    if (shadowElIdx !== -1) animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
+    animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
   }
 
   // helper function for handleDrop
   function animateDraggedToFinalPosition(shadowElIdx, callback) {
-    var shadowElRect = getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]);
+    var shadowElRect = shadowElIdx > -1 ? getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]) : getBoundingRectNoTransforms(shadowElDropZone);
     var newTransform = {
       x: shadowElRect.left - parseFloat(draggedEl.style.left),
       y: shadowElRect.top - parseFloat(draggedEl.style.top)
@@ -1671,11 +1673,16 @@
       window.removeEventListener("mouseup", handleFalseAlarm);
       window.removeEventListener("touchend", handleFalseAlarm);
     }
-    function handleFalseAlarm() {
+    function handleFalseAlarm(e) {
       removeMaybeListeners();
       originalDragTarget = undefined;
       dragStartMousePosition = undefined;
       currentMousePosition = undefined;
+
+      // dragging initiated by touch events prevents onclick from initially firing
+      if (e.type === "touchend") {
+        e.target.click();
+      }
     }
     function handleMouseMoveMaybeDragStart(e) {
       e.preventDefault();
@@ -1710,6 +1717,7 @@
         });
         return;
       }
+      e.preventDefault();
       e.stopPropagation();
       var c = e.touches ? e.touches[0] : e;
       dragStartMousePosition = {
@@ -1733,9 +1741,10 @@
       /** @type {ShadowRoot | HTMLDocument | Element } */
       var rootNode = originDropZone.closest("dialog") || originDropZone.getRootNode();
       var originDropZoneRoot = rootNode.body || rootNode;
-      var items = config.items,
+      var originalItems = config.items,
         type = config.type,
         centreDraggedOnCursor = config.centreDraggedOnCursor;
+      var items = _toConsumableArray(originalItems);
       draggedElData = items[currentIdx];
       draggedElType = type;
       shadowElData = createShadowElData(draggedElData);
@@ -1753,6 +1762,8 @@
           watchDraggedElement();
           hideElement(originalDragTarget);
           originDropZoneRoot.appendChild(originalDragTarget);
+          // after the removal of the original element we can give the shadow element the original item id so that the host zone can find it and render it correctly if it does lookups by id
+          shadowElData[ITEM_ID_KEY] = draggedElData[ITEM_ID_KEY];
         } else {
           window.requestAnimationFrame(keepOriginalElementInDom);
         }

package/dist/index.mjs

@@ -1433,7 +1433,7 @@ function handleDraggedLeft(e) {
     return ["dragged left", e.currentTarget, e.detail];
   });
   var _dzToConfig$get2 = dzToConfig.get(e.currentTarget),
-    items = _dzToConfig$get2.items,
+    originalItems = _dzToConfig$get2.items,
     dropFromOthersDisabled = _dzToConfig$get2.dropFromOthersDisabled;
   if (dropFromOthersDisabled && e.currentTarget !== originDropZone && e.currentTarget !== shadowElDropZone) {
     printDebug(function () {
@@ -1441,10 +1441,12 @@ function handleDraggedLeft(e) {
     });
     return;
   }
+  var items = _toConsumableArray(originalItems);
   var shadowElIdx = findShadowElementIdx(items);
   if (shadowElIdx !== -1) {
     items.splice(shadowElIdx, 1);
   }
+  var origShadowDz = shadowElDropZone;
   shadowElDropZone = undefined;
   var _e$detail = e.detail,
     type = _e$detail.type,
@@ -1455,7 +1457,8 @@ function handleDraggedLeft(e) {
     });
     isDraggedOutsideOfAnyDz = true;
     shadowElDropZone = originDropZone;
-    var originZoneItems = dzToConfig.get(originDropZone).items;
+    // if the last zone it left is the origin dz, we will put it back into items (which we just removed it from)
+    var originZoneItems = origShadowDz === originDropZone ? items : _toConsumableArray(dzToConfig.get(originDropZone).items);
     originZoneItems.splice(originIndex, 0, shadowElData);
     dispatchConsiderEvent(originDropZone, originZoneItems, {
       trigger: TRIGGERS.DRAGGED_LEFT_ALL,
@@ -1475,7 +1478,7 @@ function handleDraggedIsOverIndex(e) {
     return ["dragged is over index", e.currentTarget, e.detail];
   });
   var _dzToConfig$get3 = dzToConfig.get(e.currentTarget),
-    items = _dzToConfig$get3.items,
+    originalItems = _dzToConfig$get3.items,
     dropFromOthersDisabled = _dzToConfig$get3.dropFromOthersDisabled;
   if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
     printDebug(function () {
@@ -1483,6 +1486,7 @@ function handleDraggedIsOverIndex(e) {
     });
     return;
   }
+  var items = _toConsumableArray(originalItems);
   isDraggedOutsideOfAnyDz = false;
   var index = e.detail.indexObj.index;
   var shadowElIdx = findShadowElementIdx(items);
@@ -1541,8 +1545,6 @@ function handleDrop() {
   if (shadowElIdx === -1) {
     if (shadowElDropZone === originDropZone) {
       shadowElIdx = originIndex;
-    } else if (shadowElDropZone.children.length > 0) {
-      shadowElIdx = shadowElDropZone.children.length - 1;
     }
   }
   items = items.map(function (item) {
@@ -1566,12 +1568,12 @@ function handleDrop() {
     if (shadowElIdx !== -1) unDecorateShadowElement(shadowElDropZone.children[shadowElIdx]);
     cleanupPostDrop();
   }
-  if (shadowElIdx !== -1) animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
+  animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
 }
 
 // helper function for handleDrop
 function animateDraggedToFinalPosition(shadowElIdx, callback) {
-  var shadowElRect = getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]);
+  var shadowElRect = shadowElIdx > -1 ? getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]) : getBoundingRectNoTransforms(shadowElDropZone);
   var newTransform = {
     x: shadowElRect.left - parseFloat(draggedEl.style.left),
     y: shadowElRect.top - parseFloat(draggedEl.style.top)
@@ -1665,11 +1667,16 @@ function dndzone(node, options) {
     window.removeEventListener("mouseup", handleFalseAlarm);
     window.removeEventListener("touchend", handleFalseAlarm);
   }
-  function handleFalseAlarm() {
+  function handleFalseAlarm(e) {
     removeMaybeListeners();
     originalDragTarget = undefined;
     dragStartMousePosition = undefined;
     currentMousePosition = undefined;
+
+    // dragging initiated by touch events prevents onclick from initially firing
+    if (e.type === "touchend") {
+      e.target.click();
+    }
   }
   function handleMouseMoveMaybeDragStart(e) {
     e.preventDefault();
@@ -1704,6 +1711,7 @@ function dndzone(node, options) {
       });
       return;
     }
+    e.preventDefault();
     e.stopPropagation();
     var c = e.touches ? e.touches[0] : e;
     dragStartMousePosition = {
@@ -1727,9 +1735,10 @@ function dndzone(node, options) {
     /** @type {ShadowRoot | HTMLDocument | Element } */
     var rootNode = originDropZone.closest("dialog") || originDropZone.getRootNode();
     var originDropZoneRoot = rootNode.body || rootNode;
-    var items = config.items,
+    var originalItems = config.items,
       type = config.type,
       centreDraggedOnCursor = config.centreDraggedOnCursor;
+    var items = _toConsumableArray(originalItems);
     draggedElData = items[currentIdx];
     draggedElType = type;
     shadowElData = createShadowElData(draggedElData);
@@ -1747,6 +1756,8 @@ function dndzone(node, options) {
         watchDraggedElement();
         hideElement(originalDragTarget);
         originDropZoneRoot.appendChild(originalDragTarget);
+        // after the removal of the original element we can give the shadow element the original item id so that the host zone can find it and render it correctly if it does lookups by id
+        shadowElData[ITEM_ID_KEY] = draggedElData[ITEM_ID_KEY];
       } else {
         window.requestAnimationFrame(keepOriginalElementInDom);
       }

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

package/src/pointerAction.js

@@ -155,15 +155,17 @@ function handleDraggedLeft(e) {
     // dealing with a rare race condition on extremely rapid clicking and dropping
     if (!isWorkingOnPreviousDrag) return;
     printDebug(() => ["dragged left", e.currentTarget, e.detail]);
-    const {items, dropFromOthersDisabled} = dzToConfig.get(e.currentTarget);
+    const {items: originalItems, dropFromOthersDisabled} = dzToConfig.get(e.currentTarget);
     if (dropFromOthersDisabled && e.currentTarget !== originDropZone && e.currentTarget !== shadowElDropZone) {
         printDebug(() => "drop is currently disabled");
         return;
     }
+    const items = [...originalItems];
     const shadowElIdx = findShadowElementIdx(items);
     if (shadowElIdx !== -1) {
         items.splice(shadowElIdx, 1);
     }
+    const origShadowDz = shadowElDropZone;
     shadowElDropZone = undefined;
     const {type, theOtherDz} = e.detail;
     if (
@@ -173,7 +175,8 @@ function handleDraggedLeft(e) {
         printDebug(() => "dragged left all, putting shadow element back in the origin dz");
         isDraggedOutsideOfAnyDz = true;
         shadowElDropZone = originDropZone;
-        const originZoneItems = dzToConfig.get(originDropZone).items;
+        // if the last zone it left is the origin dz, we will put it back into items (which we just removed it from)
+        const originZoneItems = origShadowDz === originDropZone ? items : [...dzToConfig.get(originDropZone).items];
         originZoneItems.splice(originIndex, 0, shadowElData);
         dispatchConsiderEvent(originDropZone, originZoneItems, {
             trigger: TRIGGERS.DRAGGED_LEFT_ALL,
@@ -190,11 +193,12 @@ function handleDraggedLeft(e) {
 }
 function handleDraggedIsOverIndex(e) {
     printDebug(() => ["dragged is over index", e.currentTarget, e.detail]);
-    const {items, dropFromOthersDisabled} = dzToConfig.get(e.currentTarget);
+    const {items: originalItems, dropFromOthersDisabled} = dzToConfig.get(e.currentTarget);
     if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
         printDebug(() => "drop is currently disabled");
         return;
     }
+    const items = [...originalItems];
     isDraggedOutsideOfAnyDz = false;
     const {index} = e.detail.indexObj;
     const shadowElIdx = findShadowElementIdx(items);
@@ -242,8 +246,6 @@ function handleDrop() {
     if (shadowElIdx === -1) {
         if (shadowElDropZone === originDropZone) {
             shadowElIdx = originIndex;
-        } else if (shadowElDropZone.children.length > 0) {
-            shadowElIdx = shadowElDropZone.children.length - 1;
         }
     }
 
@@ -266,12 +268,13 @@ function handleDrop() {
         if (shadowElIdx !== -1) unDecorateShadowElement(shadowElDropZone.children[shadowElIdx]);
         cleanupPostDrop();
     }
-    if (shadowElIdx !== -1) animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
+    animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
 }
 
 // helper function for handleDrop
 function animateDraggedToFinalPosition(shadowElIdx, callback) {
-    const shadowElRect = getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]);
+    const shadowElRect =
+        shadowElIdx > -1 ? getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]) : getBoundingRectNoTransforms(shadowElDropZone);
     const newTransform = {
         x: shadowElRect.left - parseFloat(draggedEl.style.left),
         y: shadowElRect.top - parseFloat(draggedEl.style.top)
@@ -347,11 +350,16 @@ export function dndzone(node, options) {
         window.removeEventListener("mouseup", handleFalseAlarm);
         window.removeEventListener("touchend", handleFalseAlarm);
     }
-    function handleFalseAlarm() {
+    function handleFalseAlarm(e) {
         removeMaybeListeners();
         originalDragTarget = undefined;
         dragStartMousePosition = undefined;
         currentMousePosition = undefined;
+
+        // dragging initiated by touch events prevents onclick from initially firing
+        if (e.type === "touchend") {
+            e.target.click();
+        }
     }
 
     function handleMouseMoveMaybeDragStart(e) {
@@ -381,6 +389,7 @@ export function dndzone(node, options) {
             printDebug(() => "cannot start a new drag before finalizing previous one");
             return;
         }
+        e.preventDefault();
         e.stopPropagation();
         const c = e.touches ? e.touches[0] : e;
         dragStartMousePosition = {x: c.clientX, y: c.clientY};
@@ -400,7 +409,8 @@ export function dndzone(node, options) {
         /** @type {ShadowRoot | HTMLDocument | Element } */
         const rootNode = originDropZone.closest("dialog") || originDropZone.getRootNode();
         const originDropZoneRoot = rootNode.body || rootNode;
-        const {items, type, centreDraggedOnCursor} = config;
+        const {items: originalItems, type, centreDraggedOnCursor} = config;
+        const items = [...originalItems];
         draggedElData = items[currentIdx];
         draggedElType = type;
         shadowElData = createShadowElData(draggedElData);
@@ -418,6 +428,8 @@ export function dndzone(node, options) {
                 watchDraggedElement();
                 hideElement(originalDragTarget);
                 originDropZoneRoot.appendChild(originalDragTarget);
+                // after the removal of the original element we can give the shadow element the original item id so that the host zone can find it and render it correctly if it does lookups by id
+                shadowElData[ITEM_ID_KEY] = draggedElData[ITEM_ID_KEY];
             } else {
                 window.requestAnimationFrame(keepOriginalElementInDom);
             }