svelte-dnd-action 0.9.40 → 0.9.42

package/README.md

@@ -22,7 +22,7 @@ It is being actively maintained.
 -   Rich animations (can be opted out of)
 -   Touch support
 -   Define what can be dropped where (dnd-zones optionally have a "type")
--   Scroll dnd-zones and/or the window horizontally or vertically by placing the dragged element next to the edge
+-   Scroll dnd-zones (of the relevant "type"), parent containers that contains them and/or the window horizontally or vertically by placing the dragged element next to the edge
 -   Supports advanced use-cases such as various flavours of copy-on-drag and custom drag handles (see examples below)
 -   Performant and small footprint (no external dependencies, no fluff code)
 -   Fully accessible (beta) - keyboard support, aria attributes and assistive instructions for screen readers
@@ -82,7 +82,7 @@ npm install --save-dev svelte-dnd-action
         width: 50%;
         padding: 0.3em;
         border: 1px solid black;
-        /* this will allow the dragged element to scroll the list */
+        /* this will allow the dragged element to scroll the list although starting in version 0.9.41 the lib would detect any scrollable parent*/
         overflow: scroll;
         height: 200px;
     }
@@ -207,7 +207,6 @@ If you want to implement your own custom screen-reader alerts, roles and instruc
 -   Any data that should "survive" when the items are dragged around and dropped should be included in the `items` array that is passed in.
 -   The host component must refresh the items that are passed in to the custom-action when receiving consider and finalize events (do not omit any handler).
 -   FYI, the library assumes it is okay to add a temporary item to the items list in any of the dnd-zones while an element is dragged around.
--   If you want dragged items to be able to scroll the container, make sure the scroll-container (the element with overflow:scroll) is the dnd-zone (the element decorated with this custom action)
 -   Svelte's built-in transitions might not play nice with this library. Luckily, it is an easy issue to work around. There are examples above.
 
 ### Overriding the item id key name
@@ -373,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

@@ -501,33 +501,13 @@
 
   /**
    * @param {HTMLElement} el - the element to check
-   * @returns {boolean} - true if the element in its entirety is off screen including the scrollable area (the normal dom events look at the mouse rather than the element)
+   * @returns {boolean} - true if the element in its entirety is off-screen including the scrollable area (the normal dom events look at the mouse rather than the element)
    */
   function isElementOffDocument(el) {
     var rect = getAbsoluteRect(el);
     return rect.right < 0 || rect.left > document.documentElement.scrollWidth || rect.bottom < 0 || rect.top > document.documentElement.scrollHeight;
   }
 
-  /**
-   * If the point is inside the element returns its distances from the sides, otherwise returns null
-   * @param {Point} point
-   * @param {HTMLElement} el
-   * @return {null|{top: number, left: number, bottom: number, right: number}}
-   */
-  function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
-    var rect = getAbsoluteRect(el);
-    if (!isPointInsideRect(point, rect)) {
-      return null;
-    }
-    return {
-      top: point.y - rect.top,
-      bottom: rect.bottom - point.y,
-      left: point.x - rect.left,
-      // TODO - figure out what is so special about right (why the rect is too big)
-      right: Math.min(rect.right, document.documentElement.clientWidth) - point.x
-    };
-  }
-
   var dzToShadowIndexToRect;
 
   /**
@@ -541,17 +521,6 @@
   }
   resetIndexesCache();
 
-  /**
-   * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
-   * @param {HTMLElement} dz
-   */
-  function resetIndexesCacheForDz(dz) {
-    printDebug(function () {
-      return "resetting indexes cache for dz";
-    });
-    dzToShadowIndexToRect["delete"](dz);
-  }
-
   /**
    * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
    * Helpful in order to determine "would be index" more effectively
@@ -634,102 +603,6 @@
     };
   }
 
-  var SCROLL_ZONE_PX = 25;
-  function makeScroller() {
-    var scrollingInfo;
-    function resetScrolling() {
-      scrollingInfo = {
-        directionObj: undefined,
-        stepPx: 0
-      };
-    }
-    resetScrolling();
-    // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
-    function scrollContainer(containerEl) {
-      var _scrollingInfo = scrollingInfo,
-        directionObj = _scrollingInfo.directionObj,
-        stepPx = _scrollingInfo.stepPx;
-      if (directionObj) {
-        containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
-        window.requestAnimationFrame(function () {
-          return scrollContainer(containerEl);
-        });
-      }
-    }
-    function calcScrollStepPx(distancePx) {
-      return SCROLL_ZONE_PX - distancePx;
-    }
-
-    /**
-     * If the pointer is next to the sides of the element to scroll, will trigger scrolling
-     * Can be called repeatedly with updated pointer and elementToScroll values without issues
-     * @return {boolean} - true if scrolling was needed
-     */
-    function scrollIfNeeded(pointer, elementToScroll) {
-      if (!elementToScroll) {
-        return false;
-      }
-      var distances = calcInnerDistancesBetweenPointAndSidesOfElement(pointer, elementToScroll);
-      if (distances === null) {
-        resetScrolling();
-        return false;
-      }
-      var isAlreadyScrolling = !!scrollingInfo.directionObj;
-      var scrollingVertically = false,
-        scrollingHorizontally = false;
-      // vertical
-      if (elementToScroll.scrollHeight > elementToScroll.clientHeight) {
-        if (distances.bottom < SCROLL_ZONE_PX) {
-          scrollingVertically = true;
-          scrollingInfo.directionObj = {
-            x: 0,
-            y: 1
-          };
-          scrollingInfo.stepPx = calcScrollStepPx(distances.bottom);
-        } else if (distances.top < SCROLL_ZONE_PX) {
-          scrollingVertically = true;
-          scrollingInfo.directionObj = {
-            x: 0,
-            y: -1
-          };
-          scrollingInfo.stepPx = calcScrollStepPx(distances.top);
-        }
-        if (!isAlreadyScrolling && scrollingVertically) {
-          scrollContainer(elementToScroll);
-          return true;
-        }
-      }
-      // horizontal
-      if (elementToScroll.scrollWidth > elementToScroll.clientWidth) {
-        if (distances.right < SCROLL_ZONE_PX) {
-          scrollingHorizontally = true;
-          scrollingInfo.directionObj = {
-            x: 1,
-            y: 0
-          };
-          scrollingInfo.stepPx = calcScrollStepPx(distances.right);
-        } else if (distances.left < SCROLL_ZONE_PX) {
-          scrollingHorizontally = true;
-          scrollingInfo.directionObj = {
-            x: -1,
-            y: 0
-          };
-          scrollingInfo.stepPx = calcScrollStepPx(distances.left);
-        }
-        if (!isAlreadyScrolling && scrollingHorizontally) {
-          scrollContainer(elementToScroll);
-          return true;
-        }
-      }
-      resetScrolling();
-      return false;
-    }
-    return {
-      scrollIfNeeded: scrollIfNeeded,
-      resetScrolling: resetScrolling
-    };
-  }
-
   /**
    * @param {Object} object
    * @return {string}
@@ -795,9 +668,6 @@
 
   var INTERVAL_MS = 200;
   var TOLERANCE_PX = 10;
-  var _makeScroller = makeScroller(),
-    scrollIfNeeded = _makeScroller.scrollIfNeeded,
-    resetScrolling = _makeScroller.resetScrolling;
   var next;
 
   /**
@@ -805,9 +675,11 @@
    * @param {Set<HTMLElement>} dropZones
    * @param {HTMLElement} draggedEl
    * @param {number} [intervalMs = INTERVAL_MS]
+   * @param {MultiScroller} multiScroller
    */
   function observe(draggedEl, dropZones) {
     var intervalMs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INTERVAL_MS;
+    var multiScroller = arguments.length > 3 ? arguments[3] : undefined;
     // initialization
     var lastDropZoneFound;
     var lastIndexFound;
@@ -823,7 +695,7 @@
      */
     function andNow() {
       var currentCenterOfDragged = findCenterOfElement(draggedEl);
-      var scrolled = scrollIfNeeded(currentCenterOfDragged, lastDropZoneFound);
+      var scrolled = multiScroller.multiScrollIfNeeded();
       // we only want to make a new decision after the element was moved a bit to prevent flickering
       if (!scrolled && lastCentrePositionOfDragged && Math.abs(lastCentrePositionOfDragged.x - currentCenterOfDragged.x) < TOLERANCE_PX && Math.abs(lastCentrePositionOfDragged.y - currentCenterOfDragged.y) < TOLERANCE_PX) {
         next = window.setTimeout(andNow, intervalMs);
@@ -844,7 +716,7 @@
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var dz = _step.value;
-          if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
+          if (scrolled) resetIndexesCache();
           var indexObj = findWouldBeIndex(draggedEl, dz);
           if (indexObj === null) {
             // it is not inside
@@ -889,61 +761,225 @@
       return "unobserving";
     });
     clearTimeout(next);
-    resetScrolling();
     resetIndexesCache();
   }
 
-  var INTERVAL_MS$1 = 300;
-  var mousePosition;
+  var SCROLL_ZONE_PX = 30;
 
   /**
-   * Do not use this! it is visible for testing only until we get over the issue Cypress not triggering the mousemove listeners
-   * // TODO - make private (remove export)
-   * @param {{clientX: number, clientY: number}} e
+   * Will make a scroller that can scroll any element given to it in any direction
+   * @returns {{scrollIfNeeded: function(Point, HTMLElement): boolean, resetScrolling: function(void):void}}
    */
-  function updateMousePosition(e) {
-    var c = e.touches ? e.touches[0] : e;
-    mousePosition = {
-      x: c.clientX,
-      y: c.clientY
-    };
-  }
-  var _makeScroller$1 = makeScroller(),
-    scrollIfNeeded$1 = _makeScroller$1.scrollIfNeeded,
-    resetScrolling$1 = _makeScroller$1.resetScrolling;
-  var next$1;
-  function loop() {
-    if (mousePosition) {
-      var scrolled = scrollIfNeeded$1(mousePosition, document.documentElement);
-      if (scrolled) resetIndexesCache();
+  function makeScroller() {
+    var scrollingInfo;
+    function resetScrolling() {
+      scrollingInfo = {
+        directionObj: undefined,
+        stepPx: 0
+      };
+    }
+    resetScrolling();
+    // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
+    function scrollContainer(containerEl) {
+      var _scrollingInfo = scrollingInfo,
+        directionObj = _scrollingInfo.directionObj,
+        stepPx = _scrollingInfo.stepPx;
+      if (directionObj) {
+        containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
+        window.requestAnimationFrame(function () {
+          return scrollContainer(containerEl);
+        });
+      }
     }
-    next$1 = window.setTimeout(loop, INTERVAL_MS$1);
+    function calcScrollStepPx(distancePx) {
+      return SCROLL_ZONE_PX - distancePx;
+    }
+
+    /**
+     * @param {Point} pointer - the pointer will be used to decide in which direction to scroll
+     * @param {HTMLElement} elementToScroll - the scroll container
+     * If the pointer is next to the sides of the element to scroll, will trigger scrolling
+     * Can be called repeatedly with updated pointer and elementToScroll values without issues
+     * @return {boolean} - true if scrolling was needed
+     */
+    function scrollIfNeeded(pointer, elementToScroll) {
+      if (!elementToScroll) {
+        return false;
+      }
+      var distances = calcInnerDistancesBetweenPointAndSidesOfElement(pointer, elementToScroll);
+      if (distances === null) {
+        resetScrolling();
+        return false;
+      }
+      var isAlreadyScrolling = !!scrollingInfo.directionObj;
+      var scrollingVertically = false,
+        scrollingHorizontally = false;
+      // vertical
+      if (elementToScroll.scrollHeight > elementToScroll.clientHeight) {
+        if (distances.bottom < SCROLL_ZONE_PX) {
+          scrollingVertically = true;
+          scrollingInfo.directionObj = {
+            x: 0,
+            y: 1
+          };
+          scrollingInfo.stepPx = calcScrollStepPx(distances.bottom);
+        } else if (distances.top < SCROLL_ZONE_PX) {
+          scrollingVertically = true;
+          scrollingInfo.directionObj = {
+            x: 0,
+            y: -1
+          };
+          scrollingInfo.stepPx = calcScrollStepPx(distances.top);
+        }
+        if (!isAlreadyScrolling && scrollingVertically) {
+          scrollContainer(elementToScroll);
+          return true;
+        }
+      }
+      // horizontal
+      if (elementToScroll.scrollWidth > elementToScroll.clientWidth) {
+        if (distances.right < SCROLL_ZONE_PX) {
+          scrollingHorizontally = true;
+          scrollingInfo.directionObj = {
+            x: 1,
+            y: 0
+          };
+          scrollingInfo.stepPx = calcScrollStepPx(distances.right);
+        } else if (distances.left < SCROLL_ZONE_PX) {
+          scrollingHorizontally = true;
+          scrollingInfo.directionObj = {
+            x: -1,
+            y: 0
+          };
+          scrollingInfo.stepPx = calcScrollStepPx(distances.left);
+        }
+        if (!isAlreadyScrolling && scrollingHorizontally) {
+          scrollContainer(elementToScroll);
+          return true;
+        }
+      }
+      resetScrolling();
+      return false;
+    }
+    return {
+      scrollIfNeeded: scrollIfNeeded,
+      resetScrolling: resetScrolling
+    };
   }
 
   /**
-   * will start watching the mouse pointer and scroll the window if it goes next to the edges
+   * If the point is inside the element returns its distances from the sides, otherwise returns null
+   * @param {Point} point
+   * @param {HTMLElement} el
+   * @return {null|{top: number, left: number, bottom: number, right: number}}
    */
-  function armWindowScroller() {
-    printDebug(function () {
-      return "arming window scroller";
-    });
-    window.addEventListener("mousemove", updateMousePosition);
-    window.addEventListener("touchmove", updateMousePosition);
-    loop();
+  function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
+    // Even if the scrolling element is small it acts as a scroller for the viewport
+    var rect = el === document.scrollingElement ? {
+      top: 0,
+      bottom: window.innerHeight,
+      left: 0,
+      right: window.innerWidth
+    } : el.getBoundingClientRect();
+    if (!isPointInsideRect(point, rect)) {
+      return null;
+    }
+    return {
+      top: point.y - rect.top,
+      bottom: rect.bottom - point.y,
+      left: point.x - rect.left,
+      right: rect.right - point.x
+    };
   }
 
   /**
-   * will stop watching the mouse pointer and won't scroll the window anymore
+   @typedef {Object} MultiScroller
+   @property {function():boolean} multiScrollIfNeeded - call this on every "tick" to scroll containers if needed, returns true if anything was scrolled
+  /**
+   * Creates a scroller than can scroll any of the provided containers or any of their scrollable parents (including the document's scrolling element)
+   * @param {HTMLElement[]} baseElementsForScrolling
+   * @param {function():Point} getPointerPosition
+   * @return {MultiScroller}
    */
-  function disarmWindowScroller() {
+  function createMultiScroller() {
+    var baseElementsForScrolling = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var getPointerPosition = arguments.length > 1 ? arguments[1] : undefined;
     printDebug(function () {
-      return "disarming window scroller";
+      return "creating multi-scroller";
+    });
+    var scrollingContainersSet = findRelevantScrollContainers(baseElementsForScrolling);
+    var scrollingContainersDeepToShallow = Array.from(scrollingContainersSet).sort(function (dz1, dz2) {
+      return getDepth(dz2) - getDepth(dz1);
     });
-    window.removeEventListener("mousemove", updateMousePosition);
-    window.removeEventListener("touchmove", updateMousePosition);
-    mousePosition = undefined;
-    window.clearTimeout(next$1);
-    resetScrolling$1();
+    var _makeScroller = makeScroller(),
+      scrollIfNeeded = _makeScroller.scrollIfNeeded;
+
+    /**
+     * @return {boolean} - was any container scrolled
+     */
+    function tick() {
+      var mousePosition = getPointerPosition();
+      if (!mousePosition || !scrollingContainersDeepToShallow) {
+        return false;
+      }
+      var scrollContainersUnderCursor = scrollingContainersDeepToShallow.filter(function (el) {
+        return isPointInsideRect(mousePosition, el.getBoundingClientRect()) || el === document.scrollingElement;
+      });
+      for (var i = 0; i < scrollContainersUnderCursor.length; i++) {
+        var scrolled = scrollIfNeeded(mousePosition, scrollContainersUnderCursor[i]);
+        if (scrolled) {
+          return true;
+        }
+      }
+      return false;
+    }
+    return {
+      multiScrollIfNeeded: scrollingContainersSet.size > 0 ? tick : function () {
+        return false;
+      }
+    };
+  }
+
+  // internal utils
+  function findScrollableParents(element) {
+    if (!element) {
+      return [];
+    }
+    var scrollableContainers = [];
+    var parent = element;
+    while (parent) {
+      var _window$getComputedSt = window.getComputedStyle(parent),
+        overflow = _window$getComputedSt.overflow;
+      if (overflow.split(" ").some(function (o) {
+        return o.includes("auto") || o.includes("scroll");
+      })) {
+        scrollableContainers.push(parent);
+      }
+      parent = parent.parentElement;
+    }
+    return scrollableContainers;
+  }
+  function findRelevantScrollContainers(dropZones) {
+    var scrollingContainers = new Set();
+    var _iterator = _createForOfIteratorHelper(dropZones),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var dz = _step.value;
+        findScrollableParents(dz).forEach(function (container) {
+          return scrollingContainers.add(container);
+        });
+      }
+      // The scrolling element might have overflow visible and still be scrollable
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (document.scrollingElement.scrollHeight > document.scrollingElement.clientHeight || document.scrollingElement.scrollWidth > document.scrollingElement.clientHeight) {
+      scrollingContainers.add(document.scrollingElement);
+    }
+    return scrollingContainers;
   }
 
   /**
@@ -1292,7 +1328,6 @@
     printDebug(function () {
       return "watching dragged element";
     });
-    armWindowScroller();
     var dropZones = typeToDropZones.get(draggedElType);
     var _iterator = _createForOfIteratorHelper(dropZones),
       _step;
@@ -1309,18 +1344,21 @@
       _iterator.f();
     }
     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 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);
+    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.
+    var multiScroller = createMultiScroller(dropZones, function () {
+      return currentMousePosition;
+    });
+    observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller);
   }
   function unWatchDraggedElement() {
     printDebug(function () {
       return "unwatching dragged element";
     });
-    disarmWindowScroller();
     var dropZones = typeToDropZones.get(draggedElType);
     var _iterator2 = _createForOfIteratorHelper(dropZones),
       _step2;
@@ -1401,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 () {
@@ -1409,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,
@@ -1423,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,
@@ -1443,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 () {
@@ -1451,6 +1492,7 @@
       });
       return;
     }
+    var items = _toConsumableArray(originalItems);
     isDraggedOutsideOfAnyDz = false;
     var index = e.detail.indexObj.index;
     var shadowElIdx = findShadowElementIdx(items);
@@ -1509,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) {
@@ -1534,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)
@@ -1695,9 +1735,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);
@@ -1715,6 +1756,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);
         }