svelte-dnd-action 0.9.57 → 0.9.59

package/dist/index.js

@@ -1822,19 +1822,19 @@
 
       // creating the draggable element
       draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
-      originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
-
+      originDropZoneRoot.appendChild(draggedEl);
       // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
       function keepOriginalElementInDom() {
-        if (!draggedEl.parentElement) {
-          originDropZoneRoot.appendChild(draggedEl);
-          // to prevent the outline from disappearing
-          draggedEl.focus();
+        if (!originalDragTarget.parentElement) {
+          originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
+          originDropZoneRoot.appendChild(originalDragTarget);
+          // have to watch before we hide, otherwise Svelte 5 $state gets confused
           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];
+          // to prevent the outline from disappearing
+          draggedEl.focus();
         } else {
           window.requestAnimationFrame(keepOriginalElementInDom);
         }

package/dist/index.mjs

@@ -1816,19 +1816,19 @@ function dndzone$2(node, options) {
 
     // creating the draggable element
     draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
-    originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
-
+    originDropZoneRoot.appendChild(draggedEl);
     // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
     function keepOriginalElementInDom() {
-      if (!draggedEl.parentElement) {
-        originDropZoneRoot.appendChild(draggedEl);
-        // to prevent the outline from disappearing
-        draggedEl.focus();
+      if (!originalDragTarget.parentElement) {
+        originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
+        originDropZoneRoot.appendChild(originalDragTarget);
+        // have to watch before we hide, otherwise Svelte 5 $state gets confused
         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];
+        // to prevent the outline from disappearing
+        draggedEl.focus();
       } 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.57",
+    "version": "0.9.59",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/pointerAction.js

@@ -433,19 +433,19 @@ export function dndzone(node, options) {
 
         // creating the draggable element
         draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
-        originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
-
+        originDropZoneRoot.appendChild(draggedEl);
         // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
         function keepOriginalElementInDom() {
-            if (!draggedEl.parentElement) {
-                originDropZoneRoot.appendChild(draggedEl);
-                // to prevent the outline from disappearing
-                draggedEl.focus();
+            if (!originalDragTarget.parentElement) {
+                originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
+                originDropZoneRoot.appendChild(originalDragTarget);
+                // have to watch before we hide, otherwise Svelte 5 $state gets confused
                 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];
+                // to prevent the outline from disappearing
+                draggedEl.focus();
             } else {
                 window.requestAnimationFrame(keepOriginalElementInDom);
             }