svelte-dnd-action - npm Package Compare versions

Comparing version 0.9.41 to 0.9.42

package.json

 {
     "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.42",
     "repository": {
@@ -6,0 +6,0 @@ "type": "git",

README.md

@@ -375,3 +375,10 @@ # SVELTE DND ACTION [![Known Vulnerabilities](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action/badge.svg?targetFile=package.json)](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action?targetFile=package.json)
 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):
@@ -378,0 +385,0 @@

src/pointerAction.js

@@ -158,3 +158,3 @@ import {
     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) {
@@ -164,2 +164,3 @@ printDebug(() => "drop is currently disabled");
     }
+    const items = [...originalItems];
     const shadowElIdx = findShadowElementIdx(items);
@@ -169,2 +170,3 @@ if (shadowElIdx !== -1) {
     }
+    const origShadowDz = shadowElDropZone;
     shadowElDropZone = undefined;
@@ -179,3 +181,4 @@ const {type, theOtherDz} = e.detail;
         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);
@@ -197,3 +200,3 @@ dispatchConsiderEvent(originDropZone, originZoneItems, {
     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) {
@@ -203,2 +206,3 @@ printDebug(() => "drop is currently disabled");
     }
+    const items = [...originalItems];
     isDraggedOutsideOfAnyDz = false;
@@ -251,4 +255,2 @@ const {index} = e.detail.indexObj;
             shadowElIdx = originIndex;
-        } else if (shadowElDropZone.children.length > 0) {
-            shadowElIdx = shadowElDropZone.children.length - 1;
         }
@@ -276,3 +278,3 @@ }
     }
-    if (shadowElIdx !== -1) animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
+    animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
 }
@@ -282,3 +284,4 @@
 function animateDraggedToFinalPosition(shadowElIdx, callback) {
-    const shadowElRect = getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]);
+    const shadowElRect =
+        shadowElIdx > -1 ? getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]) : getBoundingRectNoTransforms(shadowElDropZone);
     const newTransform = {
@@ -412,3 +415,4 @@ x: shadowElRect.left - parseFloat(draggedEl.style.left),
         const originDropZoneRoot = rootNode.body || rootNode;
-        const {items, type, centreDraggedOnCursor} = config;
+        const {items: originalItems, type, centreDraggedOnCursor} = config;
+        const items = [...originalItems];
         draggedElData = items[currentIdx];
@@ -431,2 +435,4 @@ draggedElType = type;
                 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 {
@@ -433,0 +439,0 @@ window.requestAnimationFrame(keepOriginalElementInDom);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

304518

increased by0.67%

Lines of code

7015

increased by0.23%

Number of lines in readme file

407

increased by1.75%

No dependency changes