svelte-dnd-action 0.9.28 → 0.9.30

package/README.md

@@ -106,7 +106,7 @@ An options-object with the following attributes:
 | Name | Type | Required? | Default Value | Description |
 | ------------------------- | -------------- | ------------------------------------------------------------ | ------------------------------------------------- | ------------------------------------------------------------ |
 | `items` | Array<Object> | Yes. Each object in the array **has to have** an `id` property (key name can be overridden globally) with a unique value (within all dnd-zones of the same type) | N/A | The data array that is used to produce the list with the draggable items (the same thing you run your #each block on). The dndzone should not have children that don't originate in `items` |
-| `flipDurationMs` | Number | No | `0` | The same value you give the flip animation on the items (to make them animated as they "make space" for the dragged item). Set to zero or leave out if you don't want animations |
+| `flipDurationMs` | Number | No | `0` | The same value you give the flip animation on the items (to make them animated as they "make space" for the dragged item). Set to zero if you dont want animations, if unset it defaults to 100ms |
 | `type` | String | No | Internal | dnd-zones that share the same type can have elements from one dragged into another. By default, all dnd-zones have the same type |
 | `dragDisabled` | Boolean | No | `false` | Setting it to true will make it impossible to drag elements out of the dnd-zone. You can change it at any time, and the zone will adjust on the fly |
 | `morphDisabled` | Boolean | No | `false` | By default, when dragging over a zone, the dragged element is morphed to look like it would if dropped. You can prevent it by setting this option. |
@@ -347,6 +347,32 @@ You can use generics to set the type of `items` you are expecting in `DndEvent`.
 </script>
 ```
 
+### Nested Zones Optional Optimization (experimental)
+
+This is an experimental feature added in version 0.9.29. If you have multiple levels of nesting, the lib might do unnecessary work when dragging an element that has nested zones inside.
+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]} `
+
+#### Simplified Example (just shows where to place the attribute):
+
+```html
+<script>
+    import {dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME} from 'svelte-dnd-action';
+    let items = [];
+</script>
+<section>
+    <div use:dndzone={{items}} on:consider={e => items = e.detail.items} on:finalize={e => items = e.detail.items}>
+        {#each items as item (item.id)}
+            <div data-is-dnd-shadow-item-hint={item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}>
+                <h1>{item.title}</h1>
+                <!--more nested zones go here, can include the attribute on their items as demonstrated above-->
+            </div>
+        {/each}
+    </div>
+</section>
+```
+
 ### Contributing [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/isaacHagoel/svelte-dnd-action/issues)
 
 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).

package/dist/index.d.ts

@@ -78,6 +78,7 @@ export type DndEvent<T = Item> = {
 export declare const SHADOW_ITEM_MARKER_PROPERTY_NAME: "isDndShadowItem";
 export declare const SHADOW_PLACEHOLDER_ITEM_ID: "id:dnd-shadow-placeholder-0000";
 export declare const DRAGGED_ELEMENT_ID: "dnd-action-dragged-el";
+export declare const SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-hint";
 
 /**
  * Allows the user to show/hide console debug output

package/dist/index.js

@@ -294,7 +294,8 @@
     KEYBOARD: "keyboard"
   };
   var SHADOW_ITEM_MARKER_PROPERTY_NAME = "isDndShadowItem";
-  var SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item";
+  var SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-internal";
+  var SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-hint";
   var SHADOW_PLACEHOLDER_ITEM_ID = "id:dnd-shadow-placeholder-0000";
   var DRAGGED_ELEMENT_ID = "dnd-action-dragged-el";
   var ITEM_ID_KEY = "id";
@@ -1225,10 +1226,12 @@
 
   var DEFAULT_DROP_ZONE_TYPE = "--any--";
   var MIN_OBSERVATION_INTERVAL_MS = 100;
+  var DISABLED_OBSERVATION_INTERVAL_MS = 20;
   var MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
   var DEFAULT_DROP_TARGET_STYLE = {
     outline: "rgba(255, 255, 102, 0.7) solid 2px"
   };
+  var ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE = "data-is-dnd-original-dragged-item";
   var originalDragTarget;
   var draggedEl;
   var draggedElData;
@@ -1296,9 +1299,10 @@
     }
     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
-    var observationIntervalMs = Math.max.apply(Math, [MIN_OBSERVATION_INTERVAL_MS].concat(_toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
+    var setIntervalMs = Math.max.apply(Math, _toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
       return dzToConfig.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.
     observe(draggedEl, dropZones, observationIntervalMs * 1.07);
   }
   function unWatchDraggedElement() {
@@ -1324,17 +1328,9 @@
     window.removeEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
     unobserve();
   }
-
-  // finds the initial placeholder that is placed there on drag start
-  function findShadowPlaceHolderIdx(items) {
-    return items.findIndex(function (item) {
-      return item[ITEM_ID_KEY] === SHADOW_PLACEHOLDER_ITEM_ID;
-    });
-  }
   function findShadowElementIdx(items) {
-    // checking that the id is not the placeholder's for Dragula like usecases
     return items.findIndex(function (item) {
-      return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item[ITEM_ID_KEY] !== SHADOW_PLACEHOLDER_ITEM_ID;
+      return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME];
     });
   }
 
@@ -1370,15 +1366,6 @@
         id: draggedElData[ITEM_ID_KEY],
         source: SOURCES.POINTER
       });
-    } else {
-      var shadowPlaceHolderIdx = findShadowPlaceHolderIdx(items);
-      if (shadowPlaceHolderIdx !== -1) {
-        // only happens right after drag start, on the first drag entered event
-        printDebug(function () {
-          return "removing placeholder item from origin dz";
-        });
-        items.splice(shadowPlaceHolderIdx, 1);
-      }
     }
     var _e$detail$indexObj = e.detail.indexObj,
       index = _e$detail$indexObj.index,
@@ -1671,6 +1658,7 @@
       addMaybeListeners();
     }
     function handleDragStart() {
+      var _objectSpread2$1;
       printDebug(function () {
         return ["drag start config: ".concat(toString(config)), originalDragTarget];
       });
@@ -1688,12 +1676,12 @@
         centreDraggedOnCursor = config.centreDraggedOnCursor;
       draggedElData = _objectSpread2({}, items[currentIdx]);
       draggedElType = type;
-      shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, _defineProperty({}, SHADOW_ITEM_MARKER_PROPERTY_NAME, true));
-      // The initial shadow element. We need a different id at first in order to avoid conflicts and timing issues
-      var placeHolderElData = _objectSpread2(_objectSpread2({}, shadowElData), {}, _defineProperty({}, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID));
+      shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, SHADOW_ITEM_MARKER_PROPERTY_NAME, true), _defineProperty(_objectSpread2$1, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID), _objectSpread2$1));
 
       // creating the draggable element
       draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
+      originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
+
       // 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) {
@@ -1717,7 +1705,7 @@
       });
 
       // removing the original element by removing its data entry
-      items.splice(currentIdx, 1, placeHolderElData);
+      items.splice(currentIdx, 1, shadowElData);
       unlockOriginDzMinDimensions = preventShrinking(originDropZone);
       dispatchConsiderEvent(originDropZone, items, {
         trigger: TRIGGERS.DRAG_STARTED,
@@ -1852,7 +1840,7 @@
           unregisterDropZone(node, dzToConfig.get(node).type);
           dzToConfig["delete"](node);
         }
-        if (isWorkingOnPreviousDrag) {
+        if (isWorkingOnPreviousDrag && !node.closest("[".concat(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, "]"))) {
           printDebug(function () {
             return "pointer dndzone will be scheduled for destruction";
           });
@@ -2382,6 +2370,12 @@
    * @return {{update: function, destroy: function}}
    */
   function dndzone$2(node, options) {
+    if (shouldIgnoreZone(node)) {
+      return {
+        update: function update() {},
+        destroy: function destroy() {}
+      };
+    }
     validateOptions(options);
     var pointerZone = dndzone(node, options);
     var keyboardZone = dndzone$1(node, options);
@@ -2397,6 +2391,16 @@
       }
     };
   }
+
+  /**
+   * If the user marked something in the ancestry of our node as shadow element, we can ignore it
+   * We need the user to mark it for us because svelte updates the action from deep to shallow (but renders top down)
+   * @param {HTMLElement} node
+   * @return {boolean}
+   */
+  function shouldIgnoreZone(node) {
+    return !!node.closest("[".concat(SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME, "=\"true\"]"));
+  }
   function validateOptions(options) {
     /*eslint-disable*/
     var items = options.items,

package/dist/index.mjs

@@ -288,7 +288,8 @@ var SOURCES = {
   KEYBOARD: "keyboard"
 };
 var SHADOW_ITEM_MARKER_PROPERTY_NAME = "isDndShadowItem";
-var SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item";
+var SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-internal";
+var SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-hint";
 var SHADOW_PLACEHOLDER_ITEM_ID = "id:dnd-shadow-placeholder-0000";
 var DRAGGED_ELEMENT_ID = "dnd-action-dragged-el";
 var ITEM_ID_KEY = "id";
@@ -1219,10 +1220,12 @@ function preventShrinking(el) {
 
 var DEFAULT_DROP_ZONE_TYPE = "--any--";
 var MIN_OBSERVATION_INTERVAL_MS = 100;
+var DISABLED_OBSERVATION_INTERVAL_MS = 20;
 var MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
 var DEFAULT_DROP_TARGET_STYLE = {
   outline: "rgba(255, 255, 102, 0.7) solid 2px"
 };
+var ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE = "data-is-dnd-original-dragged-item";
 var originalDragTarget;
 var draggedEl;
 var draggedElData;
@@ -1290,9 +1293,10 @@ 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
-  var observationIntervalMs = Math.max.apply(Math, [MIN_OBSERVATION_INTERVAL_MS].concat(_toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
+  var setIntervalMs = Math.max.apply(Math, _toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
     return dzToConfig.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.
   observe(draggedEl, dropZones, observationIntervalMs * 1.07);
 }
 function unWatchDraggedElement() {
@@ -1318,17 +1322,9 @@ function unWatchDraggedElement() {
   window.removeEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
   unobserve();
 }
-
-// finds the initial placeholder that is placed there on drag start
-function findShadowPlaceHolderIdx(items) {
-  return items.findIndex(function (item) {
-    return item[ITEM_ID_KEY] === SHADOW_PLACEHOLDER_ITEM_ID;
-  });
-}
 function findShadowElementIdx(items) {
-  // checking that the id is not the placeholder's for Dragula like usecases
   return items.findIndex(function (item) {
-    return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item[ITEM_ID_KEY] !== SHADOW_PLACEHOLDER_ITEM_ID;
+    return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME];
   });
 }
 
@@ -1364,15 +1360,6 @@ function handleDraggedEntered(e) {
       id: draggedElData[ITEM_ID_KEY],
       source: SOURCES.POINTER
     });
-  } else {
-    var shadowPlaceHolderIdx = findShadowPlaceHolderIdx(items);
-    if (shadowPlaceHolderIdx !== -1) {
-      // only happens right after drag start, on the first drag entered event
-      printDebug(function () {
-        return "removing placeholder item from origin dz";
-      });
-      items.splice(shadowPlaceHolderIdx, 1);
-    }
   }
   var _e$detail$indexObj = e.detail.indexObj,
     index = _e$detail$indexObj.index,
@@ -1665,6 +1652,7 @@ function dndzone(node, options) {
     addMaybeListeners();
   }
   function handleDragStart() {
+    var _objectSpread2$1;
     printDebug(function () {
       return ["drag start config: ".concat(toString(config)), originalDragTarget];
     });
@@ -1682,12 +1670,12 @@ function dndzone(node, options) {
       centreDraggedOnCursor = config.centreDraggedOnCursor;
     draggedElData = _objectSpread2({}, items[currentIdx]);
     draggedElType = type;
-    shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, _defineProperty({}, SHADOW_ITEM_MARKER_PROPERTY_NAME, true));
-    // The initial shadow element. We need a different id at first in order to avoid conflicts and timing issues
-    var placeHolderElData = _objectSpread2(_objectSpread2({}, shadowElData), {}, _defineProperty({}, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID));
+    shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, SHADOW_ITEM_MARKER_PROPERTY_NAME, true), _defineProperty(_objectSpread2$1, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID), _objectSpread2$1));
 
     // creating the draggable element
     draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
+    originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
+
     // 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) {
@@ -1711,7 +1699,7 @@ function dndzone(node, options) {
     });
 
     // removing the original element by removing its data entry
-    items.splice(currentIdx, 1, placeHolderElData);
+    items.splice(currentIdx, 1, shadowElData);
     unlockOriginDzMinDimensions = preventShrinking(originDropZone);
     dispatchConsiderEvent(originDropZone, items, {
       trigger: TRIGGERS.DRAG_STARTED,
@@ -1846,7 +1834,7 @@ function dndzone(node, options) {
         unregisterDropZone(node, dzToConfig.get(node).type);
         dzToConfig["delete"](node);
       }
-      if (isWorkingOnPreviousDrag) {
+      if (isWorkingOnPreviousDrag && !node.closest("[".concat(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, "]"))) {
         printDebug(function () {
           return "pointer dndzone will be scheduled for destruction";
         });
@@ -2376,6 +2364,12 @@ var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabl
  * @return {{update: function, destroy: function}}
  */
 function dndzone$2(node, options) {
+  if (shouldIgnoreZone(node)) {
+    return {
+      update: function update() {},
+      destroy: function destroy() {}
+    };
+  }
   validateOptions(options);
   var pointerZone = dndzone(node, options);
   var keyboardZone = dndzone$1(node, options);
@@ -2391,6 +2385,16 @@ function dndzone$2(node, options) {
     }
   };
 }
+
+/**
+ * If the user marked something in the ancestry of our node as shadow element, we can ignore it
+ * We need the user to mark it for us because svelte updates the action from deep to shallow (but renders top down)
+ * @param {HTMLElement} node
+ * @return {boolean}
+ */
+function shouldIgnoreZone(node) {
+  return !!node.closest("[".concat(SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME, "=\"true\"]"));
+}
 function validateOptions(options) {
   /*eslint-disable*/
   var items = options.items,

package/package.json

@@ -42,8 +42,8 @@
         "src",
         "dist"
     ],
-    "description": "*An awesome drag and drop library for Svelte 3 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.28",
+    "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.30",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/action.js

@@ -1,6 +1,6 @@
 import {dndzone as pointerDndZone} from "./pointerAction";
 import {dndzone as keyboardDndZone} from "./keyboardAction";
-import {ITEM_ID_KEY} from "./constants";
+import {ITEM_ID_KEY, SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME} from "./constants";
 import {toString} from "./helpers/util";
 
 /**
@@ -25,6 +25,12 @@ import {toString} from "./helpers/util";
  * @return {{update: function, destroy: function}}
  */
 export function dndzone(node, options) {
+    if (shouldIgnoreZone(node)) {
+        return {
+            update: () => {},
+            destroy: () => {}
+        };
+    }
     validateOptions(options);
     const pointerZone = pointerDndZone(node, options);
     const keyboardZone = keyboardDndZone(node, options);
@@ -41,6 +47,16 @@ export function dndzone(node, options) {
     };
 }
 
+/**
+ * If the user marked something in the ancestry of our node as shadow element, we can ignore it
+ * We need the user to mark it for us because svelte updates the action from deep to shallow (but renders top down)
+ * @param {HTMLElement} node
+ * @return {boolean}
+ */
+function shouldIgnoreZone(node) {
+    return !!node.closest(`[${SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME}="true"]`);
+}
+
 function validateOptions(options) {
     /*eslint-disable*/
     const {

package/src/constants.js

@@ -19,7 +19,8 @@ export const SOURCES = {
 };
 
 export const SHADOW_ITEM_MARKER_PROPERTY_NAME = "isDndShadowItem";
-export const SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item";
+export const SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-internal";
+export const SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-hint";
 export const SHADOW_PLACEHOLDER_ITEM_ID = "id:dnd-shadow-placeholder-0000";
 export const DRAGGED_ELEMENT_ID = "dnd-action-dragged-el";
 

package/src/pointerAction.js

@@ -36,10 +36,12 @@ import {getBoundingRectNoTransforms} from "./helpers/intersection";
 
 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_DROP_TARGET_STYLE = {
     outline: "rgba(255, 255, 102, 0.7) solid 2px"
 };
+const ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE = "data-is-dnd-original-dragged-item";
 
 let originalDragTarget;
 let draggedEl;
@@ -95,10 +97,8 @@ 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 observationIntervalMs = Math.max(
-        MIN_OBSERVATION_INTERVAL_MS,
-        ...Array.from(dropZones.keys()).map(dz => dzToConfig.get(dz).dropAnimationDurationMs)
-    );
+    const setIntervalMs = Math.max(...Array.from(dropZones.keys()).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.
     observe(draggedEl, dropZones, observationIntervalMs * 1.07);
 }
 function unWatchDraggedElement() {
@@ -114,13 +114,8 @@ function unWatchDraggedElement() {
     unobserve();
 }
 
-// finds the initial placeholder that is placed there on drag start
-function findShadowPlaceHolderIdx(items) {
-    return items.findIndex(item => item[ITEM_ID_KEY] === SHADOW_PLACEHOLDER_ITEM_ID);
-}
 function findShadowElementIdx(items) {
-    // checking that the id is not the placeholder's for Dragula like usecases
-    return items.findIndex(item => !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item[ITEM_ID_KEY] !== SHADOW_PLACEHOLDER_ITEM_ID);
+    return items.findIndex(item => !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME]);
 }
 
 /* custom drag-events handlers */
@@ -144,15 +139,7 @@ function handleDraggedEntered(e) {
             id: draggedElData[ITEM_ID_KEY],
             source: SOURCES.POINTER
         });
-    } else {
-        const shadowPlaceHolderIdx = findShadowPlaceHolderIdx(items);
-        if (shadowPlaceHolderIdx !== -1) {
-            // only happens right after drag start, on the first drag entered event
-            printDebug(() => "removing placeholder item from origin dz");
-            items.splice(shadowPlaceHolderIdx, 1);
-        }
     }
-
     const {index, isProximityBased} = e.detail.indexObj;
     const shadowElIdx = isProximityBased && index === e.currentTarget.children.length - 1 ? index + 1 : index;
     shadowElDropZone = e.currentTarget;
@@ -245,6 +232,7 @@ function handleDrop() {
     let shadowElIdx = findShadowElementIdx(items);
     // the handler might remove the shadow element, ex: dragula like copy on drag
     if (shadowElIdx === -1) shadowElIdx = originIndex;
+
     items = items.map(item => (item[SHADOW_ITEM_MARKER_PROPERTY_NAME] ? draggedElData : item));
     function finalizeWithinZone() {
         unlockOriginDzMinDimensions();
@@ -401,12 +389,12 @@ export function dndzone(node, options) {
         const {items, type, centreDraggedOnCursor} = config;
         draggedElData = {...items[currentIdx]};
         draggedElType = type;
-        shadowElData = {...draggedElData, [SHADOW_ITEM_MARKER_PROPERTY_NAME]: true};
-        // The initial shadow element. We need a different id at first in order to avoid conflicts and timing issues
-        const placeHolderElData = {...shadowElData, [ITEM_ID_KEY]: SHADOW_PLACEHOLDER_ITEM_ID};
+        shadowElData = {...draggedElData, [SHADOW_ITEM_MARKER_PROPERTY_NAME]: true, [ITEM_ID_KEY]: SHADOW_PLACEHOLDER_ITEM_ID};
 
         // creating the draggable element
         draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
+        originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
+
         // 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) {
@@ -429,7 +417,7 @@ export function dndzone(node, options) {
         );
 
         // removing the original element by removing its data entry
-        items.splice(currentIdx, 1, placeHolderElData);
+        items.splice(currentIdx, 1, shadowElData);
         unlockOriginDzMinDimensions = preventShrinking(originDropZone);
 
         dispatchConsiderEvent(originDropZone, items, {trigger: TRIGGERS.DRAG_STARTED, id: draggedElData[ITEM_ID_KEY], source: SOURCES.POINTER});
@@ -549,7 +537,7 @@ export function dndzone(node, options) {
                 unregisterDropZone(node, dzToConfig.get(node).type);
                 dzToConfig.delete(node);
             }
-            if (isWorkingOnPreviousDrag) {
+            if (isWorkingOnPreviousDrag && !node.closest(`[${ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE}]`)) {
                 printDebug(() => "pointer dndzone will be scheduled for destruction");
                 scheduleDZForRemovalAfterDrop(node, destroyDz);
             } else {