svelte-dnd-action 0.9.78 → 0.9.80

package/dist/index.js

@@ -184,6 +184,105 @@
     };
   }
 
+  /**
+   * The window an element lives in. A drop zone can live in another window than the one that
+   * loaded this module, for example a same-origin iframe or a popup opened with window.open.
+   * @param {Node} el
+   * @return {Window}
+   */
+  function getWindowOf(el) {
+    // eslint-disable-next-line no-restricted-globals -- for a document without a window, e.g. after its window closed
+    return el.ownerDocument.defaultView || window;
+  }
+
+  /**
+   * Schedules a timeout on the given window. Work for a zone runs on the zone's window: the browser throttles
+   * or stops the timers of a hidden window, and the loading window can be hidden while the zone's is not.
+   * @param {Window} win
+   * @param {function} callback
+   * @param {number} ms
+   * @return {{win: Window, id: number}} - pass it to clearTimeoutIn
+   */
+  function setTimeoutIn(win, callback, ms) {
+    return {
+      win: win,
+      id: win.setTimeout(callback, ms)
+    };
+  }
+
+  /**
+   * Cancels a timeout through the window that scheduled it
+   * @param {{win: Window, id: number}} [timeout] - from setTimeoutIn
+   */
+  function clearTimeoutIn(timeout) {
+    if (timeout) timeout.win.clearTimeout(timeout.id);
+  }
+
+  /**
+   * @param {Object} object
+   * @return {string}
+   */
+  function toString(object) {
+    return JSON.stringify(object, null, 2);
+  }
+
+  /**
+   * Finds the depth of the given node in the DOM tree
+   * @param {HTMLElement} node
+   * @return {number} - the depth of the node
+   */
+  function getDepth(node) {
+    if (!node) {
+      throw new Error("cannot get depth of a falsy node");
+    }
+    return _getDepth(node, 0);
+  }
+  function _getDepth(node) {
+    var countSoFar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    if (!node.parentElement) {
+      return countSoFar - 1;
+    }
+    return _getDepth(node.parentElement, countSoFar + 1);
+  }
+
+  /**
+   * A simple util to shallow compare objects quickly, it doesn't validate the arguments so pass objects in
+   * @param {Object} objA
+   * @param {Object} objB
+   * @return {boolean} - true if objA and objB are shallow equal
+   */
+  function areObjectsShallowEqual(objA, objB) {
+    if (Object.keys(objA).length !== Object.keys(objB).length) {
+      return false;
+    }
+    for (var keyA in objA) {
+      if (!{}.hasOwnProperty.call(objB, keyA) || objB[keyA] !== objA[keyA]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * Shallow compares two arrays
+   * @param arrA
+   * @param arrB
+   * @return {boolean} - whether the arrays are shallow equal
+   */
+  function areArraysShallowEqualSameOrder(arrA, arrB) {
+    if (arrA.length !== arrB.length) {
+      return false;
+    }
+    for (var i = 0; i < arrA.length; i++) {
+      if (arrA[i] !== arrB[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  // Events are created in the window of the element they are dispatched on, so a listener in that window sees an
+  // instance of its own CustomEvent.
   // external events
   var FINALIZE_EVENT_NAME = "finalize";
   var CONSIDER_EVENT_NAME = "consider";
@@ -198,7 +297,7 @@
    * @param {Info} info
    */
   function dispatchFinalizeEvent(el, items, info) {
-    el.dispatchEvent(new CustomEvent(FINALIZE_EVENT_NAME, {
+    el.dispatchEvent(new (getWindowOf(el).CustomEvent)(FINALIZE_EVENT_NAME, {
       detail: {
         items: items,
         info: info
@@ -213,7 +312,7 @@
    * @param {Info} info
    */
   function dispatchConsiderEvent(el, items, info) {
-    el.dispatchEvent(new CustomEvent(CONSIDER_EVENT_NAME, {
+    el.dispatchEvent(new (getWindowOf(el).CustomEvent)(CONSIDER_EVENT_NAME, {
       detail: {
         items: items,
         info: info
@@ -231,7 +330,7 @@
     OUTSIDE_OF_ANY: "outsideOfAny"
   };
   function dispatchDraggedElementEnteredContainer(containerEl, indexObj, draggedEl) {
-    containerEl.dispatchEvent(new CustomEvent(DRAGGED_ENTERED_EVENT_NAME, {
+    containerEl.dispatchEvent(new (getWindowOf(containerEl).CustomEvent)(DRAGGED_ENTERED_EVENT_NAME, {
       detail: {
         indexObj: indexObj,
         draggedEl: draggedEl
@@ -245,7 +344,7 @@
    * @param theOtherDz - the new dropzone the element entered
    */
   function dispatchDraggedElementLeftContainerForAnother(containerEl, draggedEl, theOtherDz) {
-    containerEl.dispatchEvent(new CustomEvent(DRAGGED_LEFT_EVENT_NAME, {
+    containerEl.dispatchEvent(new (getWindowOf(containerEl).CustomEvent)(DRAGGED_LEFT_EVENT_NAME, {
       detail: {
         draggedEl: draggedEl,
         type: DRAGGED_LEFT_TYPES.LEFT_FOR_ANOTHER,
@@ -254,7 +353,7 @@
     }));
   }
   function dispatchDraggedElementLeftContainerForNone(containerEl, draggedEl) {
-    containerEl.dispatchEvent(new CustomEvent(DRAGGED_LEFT_EVENT_NAME, {
+    containerEl.dispatchEvent(new (getWindowOf(containerEl).CustomEvent)(DRAGGED_LEFT_EVENT_NAME, {
       detail: {
         draggedEl: draggedEl,
         type: DRAGGED_LEFT_TYPES.OUTSIDE_OF_ANY
@@ -262,7 +361,7 @@
     }));
   }
   function dispatchDraggedElementIsOverIndex(containerEl, indexObj, draggedEl) {
-    containerEl.dispatchEvent(new CustomEvent(DRAGGED_OVER_INDEX_EVENT_NAME, {
+    containerEl.dispatchEvent(new (getWindowOf(containerEl).CustomEvent)(DRAGGED_OVER_INDEX_EVENT_NAME, {
       detail: {
         indexObj: indexObj,
         draggedEl: draggedEl
@@ -270,7 +369,8 @@
     }));
   }
   function dispatchDraggedLeftDocument(draggedEl) {
-    window.dispatchEvent(new CustomEvent(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, {
+    var win = getWindowOf(draggedEl);
+    win.dispatchEvent(new win.CustomEvent(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, {
       detail: {
         draggedEl: draggedEl
       }
@@ -346,6 +446,8 @@
     });
     ITEM_ID_KEY = newKeyName;
   }
+
+  // eslint-disable-next-line no-restricted-globals -- detects server-side rendering
   var isOnServer = typeof window === "undefined";
   var printDebug = function printDebug() {};
 
@@ -381,7 +483,7 @@
     var onlyVisible = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     var ta;
     var rect = onlyVisible ? getVisibleRectRecursive(el) : el.getBoundingClientRect();
-    var style = getComputedStyle(el);
+    var style = getWindowOf(el).getComputedStyle(el);
     var tx = style.transform;
     if (tx) {
       var sx, sy, dx, dy;
@@ -401,8 +503,8 @@
         return rect;
       }
       var to = style.transformOrigin;
-      var x = rect.x - dx - (1 - sx) * parseFloat(to);
-      var y = rect.y - dy - (1 - sy) * parseFloat(to.slice(to.indexOf(" ") + 1));
+      var x = rect.left - dx - (1 - sx) * parseFloat(to);
+      var y = rect.top - dy - (1 - sy) * parseFloat(to.slice(to.indexOf(" ") + 1));
       var w = sx ? rect.width / sx : el.offsetWidth;
       var h = sy ? rect.height / sy : el.offsetHeight;
       return {
@@ -427,11 +529,12 @@
    */
   function getAbsoluteRectNoTransforms(el) {
     var rect = getBoundingRectNoTransforms(el);
+    var win = getWindowOf(el);
     return {
-      top: rect.top + window.scrollY,
-      bottom: rect.bottom + window.scrollY,
-      left: rect.left + window.scrollX,
-      right: rect.right + window.scrollX
+      top: rect.top + win.scrollY,
+      bottom: rect.bottom + win.scrollY,
+      left: rect.left + win.scrollX,
+      right: rect.right + win.scrollX
     };
   }
 
@@ -442,11 +545,12 @@
    */
   function getAbsoluteRect(el) {
     var rect = el.getBoundingClientRect();
+    var win = getWindowOf(el);
     return {
-      top: rect.top + window.scrollY,
-      bottom: rect.bottom + window.scrollY,
-      left: rect.left + window.scrollX,
-      right: rect.right + window.scrollX
+      top: rect.top + win.scrollY,
+      bottom: rect.bottom + win.scrollY,
+      left: rect.left + win.scrollX,
+      right: rect.right + win.scrollX
     };
   }
 
@@ -514,7 +618,8 @@
    */
   function isElementOffDocument(el) {
     var rect = getAbsoluteRect(el);
-    return rect.right < 0 || rect.left > document.documentElement.scrollWidth || rect.bottom < 0 || rect.top > document.documentElement.scrollHeight;
+    var documentElement = el.ownerDocument.documentElement;
+    return rect.right < 0 || rect.left > documentElement.scrollWidth || rect.bottom < 0 || rect.top > documentElement.scrollHeight;
   }
 
   /**
@@ -547,8 +652,8 @@
 
     // walk up and clip ONLY by scrollable ancestors
     var parent = element.parentElement;
-    while (parent && parent !== document.body) {
-      var style = window.getComputedStyle(parent);
+    while (parent && parent !== element.ownerDocument.body) {
+      var style = getWindowOf(parent).getComputedStyle(parent);
       var overflowY = style.overflowY;
       var overflowX = style.overflowX;
       var isScrollableY = overflowY === "scroll" || overflowY === "auto";
@@ -727,72 +832,12 @@
     };
   }
 
-  /**
-   * @param {Object} object
-   * @return {string}
-   */
-  function toString(object) {
-    return JSON.stringify(object, null, 2);
-  }
-
-  /**
-   * Finds the depth of the given node in the DOM tree
-   * @param {HTMLElement} node
-   * @return {number} - the depth of the node
-   */
-  function getDepth(node) {
-    if (!node) {
-      throw new Error("cannot get depth of a falsy node");
-    }
-    return _getDepth(node, 0);
-  }
-  function _getDepth(node) {
-    var countSoFar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    if (!node.parentElement) {
-      return countSoFar - 1;
-    }
-    return _getDepth(node.parentElement, countSoFar + 1);
-  }
-
-  /**
-   * A simple util to shallow compare objects quickly, it doesn't validate the arguments so pass objects in
-   * @param {Object} objA
-   * @param {Object} objB
-   * @return {boolean} - true if objA and objB are shallow equal
-   */
-  function areObjectsShallowEqual(objA, objB) {
-    if (Object.keys(objA).length !== Object.keys(objB).length) {
-      return false;
-    }
-    for (var keyA in objA) {
-      if (!{}.hasOwnProperty.call(objB, keyA) || objB[keyA] !== objA[keyA]) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  /**
-   * Shallow compares two arrays
-   * @param arrA
-   * @param arrB
-   * @return {boolean} - whether the arrays are shallow equal
-   */
-  function areArraysShallowEqualSameOrder(arrA, arrB) {
-    if (arrA.length !== arrB.length) {
-      return false;
-    }
-    for (var i = 0; i < arrA.length; i++) {
-      if (arrA[i] !== arrB[i]) {
-        return false;
-      }
-    }
-    return true;
-  }
-
   var INTERVAL_MS = 200;
   var TOLERANCE_PX = 10;
   var next;
+  // The observation in progress. A consider handler can end the drag in the middle of an observation tick, for example by
+  // removing the drag's window, and the tick must not carry on with a drag that has ended.
+  var currentObservation;
 
   /**
    * Tracks the dragged elements and performs the side effects when it is dragged over a drop zone (basically dispatching custom-events scrolling)
@@ -811,6 +856,9 @@
     var lastIndexFound;
     var lastIsDraggedInADropZone = false;
     var lastCentrePositionOfDragged;
+    var win = getWindowOf(draggedEl);
+    var observation = {};
+    currentObservation = observation;
     // We are sorting to make sure that in case of nested zones of the same type the one "on top" is considered first
     var dropZonesFromDeepToShallow = Array.from(dropZones).sort(function (dz1, dz2) {
       return getDepth(dz2) - getDepth(dz1);
@@ -824,7 +872,7 @@
       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 - referencePoint.x) < TOLERANCE_PX && Math.abs(lastCentrePositionOfDragged.y - referencePoint.y) < TOLERANCE_PX) {
-        next = window.setTimeout(andNow, intervalMs);
+        next = setTimeoutIn(win, andNow, intervalMs);
         return;
       }
       if (isElementOffDocument(draggedEl)) {
@@ -853,6 +901,7 @@
           // the element is over a container
           if (dz !== lastDropZoneFound) {
             lastDropZoneFound && dispatchDraggedElementLeftContainerForAnother(lastDropZoneFound, draggedEl, dz);
+            if (currentObservation !== observation) return;
             dispatchDraggedElementEnteredContainer(dz, indexObj, draggedEl);
             lastDropZoneFound = dz;
           } else if (index !== lastIndexFound) {
@@ -876,7 +925,8 @@
       } else {
         lastIsDraggedInADropZone = true;
       }
-      next = window.setTimeout(andNow, intervalMs);
+      if (currentObservation !== observation) return;
+      next = setTimeoutIn(win, andNow, intervalMs);
     }
     andNow();
   }
@@ -886,7 +936,9 @@
     printDebug(function () {
       return "unobserving";
     });
-    clearTimeout(next);
+    currentObservation = undefined;
+    clearTimeoutIn(next);
+    next = undefined;
     resetIndexesCache();
   }
 
@@ -912,7 +964,7 @@
         stepPx = _scrollingInfo.stepPx;
       if (directionObj) {
         containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
-        window.requestAnimationFrame(function () {
+        getWindowOf(containerEl).requestAnimationFrame(function () {
           return scrollContainer(containerEl);
         });
       }
@@ -1001,11 +1053,11 @@
    */
   function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
     // Even if the scrolling element is small it acts as a scroller for the viewport
-    var rect = el === document.scrollingElement ? {
+    var rect = el === el.ownerDocument.scrollingElement ? {
       top: 0,
-      bottom: window.innerHeight,
+      bottom: getWindowOf(el).innerHeight,
       left: 0,
-      right: window.innerWidth
+      right: getWindowOf(el).innerWidth
     } : el.getBoundingClientRect();
     if (!isPointInsideRect(point, rect)) {
       return null;
@@ -1050,7 +1102,7 @@
         return false;
       }
       var scrollContainersUnderCursor = scrollingContainersDeepToShallow.filter(function (el) {
-        return isPointInsideRect(mousePosition, el.getBoundingClientRect()) || el === document.scrollingElement;
+        return isPointInsideRect(mousePosition, el.getBoundingClientRect()) || el === el.ownerDocument.scrollingElement;
       });
       for (var i = 0; i < scrollContainersUnderCursor.length; i++) {
         var scrolled = scrollIfNeeded(mousePosition, scrollContainersUnderCursor[i]);
@@ -1078,8 +1130,8 @@
     var scrollableContainers = [];
     var parent = element;
     while (parent) {
-      var _window$getComputedSt = window.getComputedStyle(parent),
-        overflow = _window$getComputedSt.overflow;
+      var _getWindowOf$getCompu = getWindowOf(parent).getComputedStyle(parent),
+        overflow = _getWindowOf$getCompu.overflow;
       if (overflow.split(" ").some(function (o) {
         return o.includes("auto") || o.includes("scroll");
       })) {
@@ -1099,16 +1151,17 @@
         findScrollableParents(dz).forEach(function (container) {
           return scrollingContainers.add(container);
         });
+        // The scrolling element might have overflow visible and still be scrollable
+        var scrollingElement = dz.ownerDocument.scrollingElement;
+        if (scrollingElement.scrollHeight > scrollingElement.clientHeight || scrollingElement.scrollWidth > scrollingElement.clientHeight) {
+          scrollingContainers.add(scrollingElement);
+        }
       }
-      // 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;
   }
 
@@ -1227,6 +1280,7 @@
    */
   function createDraggedElementFrom(originalElement, positionCenterOnXY) {
     var rect = originalElement.getBoundingClientRect();
+    var win = getWindowOf(originalElement);
     var draggedEl = svelteNodeClone(originalElement);
     copyStylesFromTo(originalElement, draggedEl);
     draggedEl.id = DRAGGED_ELEMENT_ID;
@@ -1239,7 +1293,7 @@
       var center = findCenter(rect);
       elTopPx -= center.y - positionCenterOnXY.y;
       elLeftPx -= center.x - positionCenterOnXY.x;
-      window.setTimeout(function () {
+      win.setTimeout(function () {
         draggedEl.style.top = "".concat(elTopPx, "px");
         draggedEl.style.left = "".concat(elLeftPx, "px");
       }, 0);
@@ -1251,7 +1305,7 @@
     draggedEl.style.width = "".concat(rect.width, "px");
     draggedEl.style.transition = "".concat(trs("top"), ", ").concat(trs("left"), ", ").concat(trs("background-color"), ", ").concat(trs("opacity"), ", ").concat(trs("color"), " ");
     // this is a workaround for a strange browser bug that causes the right border to disappear when all the transitions are added at the same time
-    window.setTimeout(function () {
+    win.setTimeout(function () {
       return ensureMorphSizeTransitions(draggedEl);
     }, 0);
     draggedEl.style.zIndex = "9999";
@@ -1279,7 +1333,7 @@
     copyStylesFromTo(copyFromEl, draggedEl);
     var newRect = copyFromEl.getBoundingClientRect();
     var draggedElRect = draggedEl.getBoundingClientRect();
-    var draggedElComputedStyle = window.getComputedStyle(draggedEl);
+    var draggedElComputedStyle = getWindowOf(draggedEl).getComputedStyle(draggedEl);
     var currentLeft = parseFloat(draggedElComputedStyle.left);
     var currentTop = parseFloat(draggedElComputedStyle.top);
     var widthChange = newRect.width - draggedElRect.width;
@@ -1303,7 +1357,7 @@
    * @param {HTMLElement} copyToEl
    */
   function copyStylesFromTo(copyFromEl, copyToEl) {
-    var computedStyle = window.getComputedStyle(copyFromEl);
+    var computedStyle = getWindowOf(copyFromEl).getComputedStyle(copyFromEl);
     Array.from(computedStyle).filter(function (s) {
       return s.startsWith("background") || s.startsWith("padding") || s.startsWith("font") || s.startsWith("text") || s.startsWith("align") || s.startsWith("justify") || s.startsWith("display") || s.startsWith("flex") || s.startsWith("border") || s === "opacity" || s === "color" || s === "list-style-type" ||
       // copying with and height to make up for rect update timing issues in some browsers
@@ -1413,9 +1467,10 @@
    */
   function preventShrinking(el) {
     var originalMinHeight = el.style.minHeight;
-    el.style.minHeight = window.getComputedStyle(el).getPropertyValue("height");
+    var computedStyle = getWindowOf(el).getComputedStyle(el);
+    el.style.minHeight = computedStyle.getPropertyValue("height");
     var originalMinWidth = el.style.minWidth;
-    el.style.minWidth = window.getComputedStyle(el).getPropertyValue("width");
+    el.style.minWidth = computedStyle.getPropertyValue("width");
     return function undo() {
       el.style.minHeight = originalMinHeight;
       el.style.minWidth = originalMinWidth;
@@ -1452,6 +1507,11 @@
   var useCursorForDetectionActive = false;
   var pendingDragOwner;
   var watchedDropZones = new Set();
+  // The window of the drag in progress: the dragged item's own window, which is not the one that
+  // loaded this module when the zone lives in a same-origin iframe or a popup.
+  var dragWindow;
+  // While the drop animation runs: its timeout and the function that finalizes the drop
+  var dropFinalization;
 
   // a map from type to a set of drop-zones
   var typeToDropZones$1 = new Map();
@@ -1481,14 +1541,21 @@
       typeToDropZones$1["delete"](type);
     }
   }
+  // The pointer is only tracked in the drag's window and each window has its own coordinates, so zones in other windows
+  // are not candidates, and neither are zones whose window is gone
+  function getDropZonesInDragWindow(type) {
+    return Array.from(typeToDropZones$1.get(type) || []).filter(function (dz) {
+      return dz.ownerDocument.defaultView === dragWindow;
+    });
+  }
 
   /* functions to manage observing the dragged element and trigger custom drag-events */
   function watchDraggedElement() {
     printDebug(function () {
       return "watching dragged element";
     });
-    var dropZones = typeToDropZones$1.get(draggedElType);
-    if (!dropZones || dropZones.size === 0) return;
+    var dropZones = getDropZonesInDragWindow(draggedElType);
+    if (dropZones.length === 0) return;
     if (watchedDropZones.size > 0) unWatchDraggedElement();
     watchedDropZones = new Set(dropZones);
     var _iterator = _createForOfIteratorHelper(watchedDropZones),
@@ -1505,7 +1572,7 @@
     } finally {
       _iterator.f();
     }
-    window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop$1);
+    dragWindow.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop$1);
 
     // 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(watchedDropZones).map(function (dz) {
@@ -1518,8 +1585,8 @@
     // Returns reference point in document coordinates - either cursor position or element center
     var getReferencePoint = useCursorForDetectionActive ? function () {
       return {
-        x: currentMousePosition.x + window.scrollX,
-        y: currentMousePosition.y + window.scrollY
+        x: currentMousePosition.x + dragWindow.scrollX,
+        y: currentMousePosition.y + dragWindow.scrollY
       };
     } : function () {
       return findCenterOfElement(draggedEl);
@@ -1545,7 +1612,7 @@
       _iterator2.f();
     }
     watchedDropZones = new Set();
-    window.removeEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop$1);
+    dragWindow.removeEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop$1);
     // ensuring multiScroller is not already destroyed before destroying
     if (multiScroller) {
       multiScroller.destroy();
@@ -1595,6 +1662,8 @@
         id: draggedElData[ITEM_ID_KEY],
         source: SOURCES.POINTER
       });
+      // the handler can end the drag, for example by removing its window
+      if (!isWorkingOnPreviousDrag) return;
     }
     var shadowElIdx = e.detail.indexObj.index;
     shadowElDropZone = e.currentTarget;
@@ -1644,6 +1713,8 @@
         id: draggedElData[ITEM_ID_KEY],
         source: SOURCES.POINTER
       });
+      // the handler can end the drag, for example by removing its window
+      if (!isWorkingOnPreviousDrag) return;
     }
     // for the origin dz, when the dragged is outside of any, this will be fired in addition to the previous. this is for simplicity
     dispatchConsiderEvent(e.currentTarget, items, {
@@ -1696,10 +1767,10 @@
     });
     finalizingPreviousDrag = true;
     // cleanup
-    window.removeEventListener("mousemove", handleMouseMove);
-    window.removeEventListener("touchmove", handleMouseMove);
-    window.removeEventListener("mouseup", handleDrop$1);
-    window.removeEventListener("touchend", handleDrop$1);
+    dragWindow.removeEventListener("mousemove", handleMouseMove);
+    dragWindow.removeEventListener("touchmove", handleMouseMove);
+    dragWindow.removeEventListener("mouseup", handleDrop$1);
+    dragWindow.removeEventListener("touchend", handleDrop$1);
     unWatchDraggedElement();
     moveDraggedElementToWasDroppedState(draggedEl);
     if (!shadowElDropZone) {
@@ -1714,7 +1785,7 @@
     var _dzToConfig$get4 = dzToConfig$1.get(shadowElDropZone),
       items = _dzToConfig$get4.items,
       type = _dzToConfig$get4.type;
-    styleInactiveDropZones(typeToDropZones$1.get(type), function (dz) {
+    styleInactiveDropZones(getDropZonesInDragWindow(type), function (dz) {
       return dzToConfig$1.get(dz).dropTargetStyle;
     }, function (dz) {
       return dzToConfig$1.get(dz).dropTargetClasses;
@@ -1773,7 +1844,32 @@
     var transition = "transform ".concat(dropAnimationDurationMs, "ms ease");
     draggedEl.style.transition = draggedEl.style.transition ? draggedEl.style.transition + "," + transition : transition;
     draggedEl.style.transform = "translate3d(".concat(newTransform.x, "px, ").concat(newTransform.y, "px, 0)");
-    window.setTimeout(callback, dropAnimationDurationMs);
+    dropFinalization = {
+      timeout: setTimeoutIn(dragWindow, finishDropAnimation, dropAnimationDurationMs),
+      finalize: callback
+    };
+  }
+  function finishDropAnimation() {
+    var _dropFinalization = dropFinalization,
+      finalize = _dropFinalization.finalize;
+    // cleared first, because a finalize handler can remove the drag's window
+    dropFinalization = undefined;
+    finalize();
+  }
+
+  // The drag's window is going away: it was closed or navigated, or its iframe was removed. Its events, timers and animation
+  // frames stop, so finish the drag now, without the drop animation, and let the other windows start new drags.
+  function handleDragWindowHidden() {
+    printDebug(function () {
+      return "the drag's window is going away";
+    });
+    if (!finalizingPreviousDrag) {
+      handleDrop$1();
+    }
+    if (dropFinalization) {
+      clearTimeoutIn(dropFinalization.timeout);
+      finishDropAnimation();
+    }
   }
   function scheduleDZForRemovalAfterDrop(dz, destroy) {
     var scheduledRemoval = {
@@ -1781,10 +1877,10 @@
       destroy: destroy
     };
     scheduledForRemovalAfterDrop.push(scheduledRemoval);
-    window.requestAnimationFrame(function () {
+    getWindowOf(dz).requestAnimationFrame(function () {
       if (!scheduledForRemovalAfterDrop.includes(scheduledRemoval)) return;
       hideElement(dz);
-      document.body.appendChild(dz);
+      dz.ownerDocument.body.appendChild(dz);
     });
   }
   /* cleanup */
@@ -1810,9 +1906,9 @@
     finalizingPreviousDrag = false;
     unlockOriginDzMinDimensions = undefined;
     isDraggedOutsideOfAnyDz = false;
-    if (touchDragHoldTimer) {
-      clearTimeout(touchDragHoldTimer);
-    }
+    dragWindow.removeEventListener("pagehide", handleDragWindowHidden);
+    dragWindow = undefined;
+    clearTimeoutIn(touchDragHoldTimer);
     touchDragHoldTimer = undefined;
     touchHoldElapsed = false;
     useCursorForDetectionActive = false;
@@ -1855,27 +1951,29 @@
     });
     var elToIdx = new Map();
     function addMaybeListeners() {
-      window.addEventListener("mousemove", handleMouseMoveMaybeDragStart, {
+      dragWindow.addEventListener("mousemove", handleMouseMoveMaybeDragStart, {
         passive: false
       });
-      window.addEventListener("touchmove", handleMouseMoveMaybeDragStart, {
+      dragWindow.addEventListener("touchmove", handleMouseMoveMaybeDragStart, {
         passive: false,
         capture: false
       });
-      window.addEventListener("mouseup", handleFalseAlarm, {
+      dragWindow.addEventListener("mouseup", handleFalseAlarm, {
         passive: false
       });
-      window.addEventListener("touchend", handleFalseAlarm, {
+      dragWindow.addEventListener("touchend", handleFalseAlarm, {
         passive: false
       });
+      dragWindow.addEventListener("pagehide", cancelPendingDrag);
     }
     function removeMaybeListeners() {
-      window.removeEventListener("mousemove", handleMouseMoveMaybeDragStart);
-      window.removeEventListener("touchmove", handleMouseMoveMaybeDragStart);
-      window.removeEventListener("mouseup", handleFalseAlarm);
-      window.removeEventListener("touchend", handleFalseAlarm);
+      dragWindow.removeEventListener("mousemove", handleMouseMoveMaybeDragStart);
+      dragWindow.removeEventListener("touchmove", handleMouseMoveMaybeDragStart);
+      dragWindow.removeEventListener("mouseup", handleFalseAlarm);
+      dragWindow.removeEventListener("touchend", handleFalseAlarm);
+      dragWindow.removeEventListener("pagehide", cancelPendingDrag);
       if (touchDragHoldTimer) {
-        clearTimeout(touchDragHoldTimer);
+        clearTimeoutIn(touchDragHoldTimer);
         touchDragHoldTimer = undefined;
         touchHoldElapsed = false;
       }
@@ -1883,6 +1981,7 @@
     function cancelPendingDrag() {
       if (pendingDragOwner !== node) return;
       removeMaybeListeners();
+      dragWindow = undefined;
       pendingDragOwner = undefined;
       originalDragTarget = undefined;
       dragStartMousePosition = undefined;
@@ -1894,7 +1993,7 @@
 
       // dragging initiated by touch events prevents onclick from initially firing
       if (e.type === "touchend") {
-        var clickEvent = new Event("click", {
+        var clickEvent = new (getWindowOf(e.target).Event)("click", {
           bubbles: true,
           cancelable: true
         });
@@ -1916,10 +2015,8 @@
         };
         if (Math.abs(currentMousePosition.x - dragStartMousePosition.x) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX || Math.abs(currentMousePosition.y - dragStartMousePosition.y) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX) {
           // User started scrolling, cancel drag attempt.
-          if (touchDragHoldTimer) {
-            clearTimeout(touchDragHoldTimer);
-            touchDragHoldTimer = undefined;
-          }
+          clearTimeoutIn(touchDragHoldTimer);
+          touchDragHoldTimer = undefined;
           handleFalseAlarm(e);
         }
         return; // Do not preventDefault so scrolling works.
@@ -1970,10 +2067,11 @@
       };
       currentMousePosition = _objectSpread2({}, dragStartMousePosition);
       originalDragTarget = e.currentTarget;
+      dragWindow = getWindowOf(originalDragTarget);
       if (useDelay) {
         var pendingTarget = originalDragTarget;
         touchHoldElapsed = false;
-        touchDragHoldTimer = window.setTimeout(function () {
+        touchDragHoldTimer = setTimeoutIn(dragWindow, function () {
           // If this action still owns the same pending gesture, transition it to a drag.
           if (destroyed || pendingDragOwner !== node || originalDragTarget !== pendingTarget) return;
           touchHoldElapsed = true;
@@ -2026,17 +2124,19 @@
           originDropZoneRoot.appendChild(originalDragTarget);
           // have to watch before we hide, otherwise Svelte 5 $state gets confused
           watchDraggedElement();
+          // a consider handler during the first observation can end the drag, for example by removing its window
+          if (!draggedEl) return;
           hideElement(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);
+          dragWindow.requestAnimationFrame(keepOriginalElementInDom);
         }
       }
-      window.requestAnimationFrame(keepOriginalElementInDom);
-      styleActiveDropZones(Array.from(typeToDropZones$1.get(config.type)).filter(function (dz) {
+      dragWindow.requestAnimationFrame(keepOriginalElementInDom);
+      styleActiveDropZones(getDropZonesInDragWindow(config.type).filter(function (dz) {
         return dz === originDropZone || !dzToConfig$1.get(dz).dropFromOthersDisabled;
       }), function (dz) {
         return dzToConfig$1.get(dz).dropTargetStyle;
@@ -2047,26 +2147,28 @@
       // removing the original element by removing its data entry
       items.splice(currentIdx, 1, shadowElData);
       unlockOriginDzMinDimensions = preventShrinking(originDropZone);
-      dispatchConsiderEvent(originDropZone, items, {
-        trigger: TRIGGERS.DRAG_STARTED,
-        id: draggedElData[ITEM_ID_KEY],
-        source: SOURCES.POINTER
-      });
 
-      // handing over to global handlers - starting to watch the element
-      window.addEventListener("mousemove", handleMouseMove, {
+      // handing over to global handlers - starting to watch the element. This happens before the consider event because
+      // its handler can remove the drag's window, which ends the drag.
+      dragWindow.addEventListener("mousemove", handleMouseMove, {
         passive: false
       });
-      window.addEventListener("touchmove", handleMouseMove, {
+      dragWindow.addEventListener("touchmove", handleMouseMove, {
         passive: false,
         capture: false
       });
-      window.addEventListener("mouseup", handleDrop$1, {
+      dragWindow.addEventListener("mouseup", handleDrop$1, {
         passive: false
       });
-      window.addEventListener("touchend", handleDrop$1, {
+      dragWindow.addEventListener("touchend", handleDrop$1, {
         passive: false
       });
+      dragWindow.addEventListener("pagehide", handleDragWindowHidden);
+      dispatchConsiderEvent(originDropZone, items, {
+        trigger: TRIGGERS.DRAG_STARTED,
+        id: draggedElData[ITEM_ID_KEY],
+        source: SOURCES.POINTER
+      });
     }
     function configure(_ref2) {
       var _ref2$items = _ref2.items,
@@ -2095,6 +2197,9 @@
         dropAnimationDisabled = _ref2$dropAnimationDi === void 0 ? false : _ref2$dropAnimationDi,
         _ref2$delayTouchStart = _ref2.delayTouchStart,
         delayTouchStartOpt = _ref2$delayTouchStart === void 0 ? false : _ref2$delayTouchStart;
+      var isInDragWindow = isWorkingOnPreviousDrag && node.ownerDocument.defaultView === dragWindow;
+      var wasDropTarget = node === originDropZone || config.type === draggedElType && !config.dropFromOthersDisabled;
+      var isDropTarget = node === originDropZone || newType === draggedElType && !dropFromOthersDisabled;
       config.dropAnimationDurationMs = dropAnimationDurationMs;
       var effectiveDelayMs = 0;
       if (delayTouchStartOpt === true) {
@@ -2115,41 +2220,26 @@
       config.useCursorForDetection = useCursorForDetection;
       config.dropAnimationDisabled = dropAnimationDisabled;
 
-      // realtime update for dropTargetStyle
-      if (initialized && isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
-        styleInactiveDropZones([node], function () {
-          return config.dropTargetStyle;
-        }, function () {
-          return dropTargetClasses;
-        });
-        styleActiveDropZones([node], function () {
-          return dropTargetStyle;
-        }, function () {
-          return dropTargetClasses;
-        });
-      }
-      config.dropTargetStyle = dropTargetStyle;
-      config.dropTargetClasses = _toConsumableArray(dropTargetClasses);
-
-      // realtime update for dropFromOthersDisabled
-      function getConfigProp(dz, propName) {
-        return dzToConfig$1.get(dz) ? dzToConfig$1.get(dz)[propName] : config[propName];
-      }
-      if (initialized && isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
-        if (dropFromOthersDisabled) {
-          styleInactiveDropZones([node], function (dz) {
-            return getConfigProp(dz, "dropTargetStyle");
-          }, function (dz) {
-            return getConfigProp(dz, "dropTargetClasses");
+      // Realtime styling follows the same eligibility as drag start. Remove the previously applied styles and
+      // classes before storing the new options, including when disabling incoming drops and changing styles together.
+      if (initialized && isInDragWindow && !finalizingPreviousDrag && (wasDropTarget !== isDropTarget || !areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
+        if (wasDropTarget) {
+          styleInactiveDropZones([node], function () {
+            return config.dropTargetStyle;
+          }, function () {
+            return config.dropTargetClasses;
           });
-        } else {
-          styleActiveDropZones([node], function (dz) {
-            return getConfigProp(dz, "dropTargetStyle");
-          }, function (dz) {
-            return getConfigProp(dz, "dropTargetClasses");
+        }
+        if (isDropTarget) {
+          styleActiveDropZones([node], function () {
+            return dropTargetStyle;
+          }, function () {
+            return dropTargetClasses;
           });
         }
       }
+      config.dropTargetStyle = dropTargetStyle;
+      config.dropTargetClasses = _toConsumableArray(dropTargetClasses);
       config.dropFromOthersDisabled = dropFromOthersDisabled;
       dzToConfig$1.set(node, config);
       registerDropZone$1(node, newType);
@@ -2174,10 +2264,9 @@
         }
         // updating the idx
         elToIdx.set(draggableEl, idx);
-        if (!initialized) {
-          initialized = true;
-        }
       }
+      // Empty zones are initialized too: they can receive active-target styling before they have any children.
+      initialized = true;
     }
     configure(options);
     return {
@@ -2274,14 +2363,17 @@
     keyboardDragTrigger: DEFAULT_KEYBOARD_DRAG_TRIGGER
   };
   var ALERT_DIV_ID = "dnd-action-aria-alert";
-  var alertsDiv;
-  function initAriaOnBrowser() {
-    if (alertsDiv) {
+  // A map from a document to its alerts div. A zone can live in another window than the one that loaded this module, so each
+  // document with zones gets its own alerts and instructions. It is a Map rather than a WeakMap so the instructions in every
+  // document can be re-rendered; destroyAria removes the entry.
+  var docToAlertsDiv = new Map();
+  function initAriaOnBrowser(doc) {
+    if (docToAlertsDiv.has(doc)) {
       // it is already initialized
       return;
     }
     // setting the dynamic alerts
-    alertsDiv = document.createElement("div");
+    var alertsDiv = doc.createElement("div");
     (function initAlertsDiv() {
       alertsDiv.id = ALERT_DIV_ID;
       // tab index -1 makes the alert be read twice on chrome for some reason
@@ -2295,45 +2387,60 @@
       alertsDiv.style.width = "0";
       alertsDiv.setAttribute("role", "alert");
     })();
-    document.body.prepend(alertsDiv);
+    doc.body.prepend(alertsDiv);
+    // forget the documents whose window is gone
+    docToAlertsDiv.forEach(function (_, knownDoc) {
+      return !knownDoc.defaultView && docToAlertsDiv["delete"](knownDoc);
+    });
+    docToAlertsDiv.set(doc, alertsDiv);
 
     // setting the instructions
     Object.entries(INSTRUCTION_ID_TO_STRING_KEY).forEach(function (_ref7) {
       var _ref8 = _slicedToArray(_ref7, 2),
         id = _ref8[0],
         key = _ref8[1];
-      return document.body.prepend(instructionToHiddenDiv(id, formatWithFallback(key, instructionCtx)));
+      return doc.body.prepend(instructionToHiddenDiv(doc, id, formatWithFallback(key, instructionCtx)));
     });
   }
 
   /**
    * Initializes the static aria instructions so they can be attached to zones
+   * @param {Document} [doc] - the document of the zones, defaults to the one that loaded this module
    * @return {{DND_ZONE_ACTIVE: string, DND_ZONE_DRAG_DISABLED: string} | null} - the IDs for static aria instruction (to be used via aria-describedby) or null on the server
    */
-  function initAria() {
+  function initAria(doc) {
     if (isOnServer) return null;
-    if (document.readyState === "complete") {
-      initAriaOnBrowser();
+    // eslint-disable-next-line no-restricted-globals -- the documented default
+    doc = doc || document;
+    if (doc.readyState === "complete") {
+      initAriaOnBrowser(doc);
     } else {
-      window.addEventListener("DOMContentLoaded", initAriaOnBrowser);
+      doc.addEventListener("DOMContentLoaded", function () {
+        return initAriaOnBrowser(doc);
+      });
     }
     return _objectSpread2({}, INSTRUCTION_IDs$1);
   }
 
   /**
-   * Removes all the artifacts (dom elements) added by this module
+   * Removes all the artifacts (dom elements) added by this module to the given document
+   * @param {Document} [doc] - defaults to the document that loaded this module
    */
-  function destroyAria() {
-    if (isOnServer || !alertsDiv) return;
+  function destroyAria(doc) {
+    if (isOnServer) return;
+    // eslint-disable-next-line no-restricted-globals -- the documented default
+    doc = doc || document;
+    var alertsDiv = docToAlertsDiv.get(doc);
+    if (!alertsDiv) return;
     Object.keys(INSTRUCTION_ID_TO_STRING_KEY).forEach(function (id) {
-      var _document$getElementB;
-      return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+      var _doc$getElementById;
+      return (_doc$getElementById = doc.getElementById(id)) === null || _doc$getElementById === void 0 ? void 0 : _doc$getElementById.remove();
     });
     alertsDiv.remove();
-    alertsDiv = undefined;
+    docToAlertsDiv["delete"](doc);
   }
-  function instructionToHiddenDiv(id, txt) {
-    var div = document.createElement("div");
+  function instructionToHiddenDiv(doc, id, txt) {
+    var div = doc.createElement("div");
     div.id = id;
     renderInstruction(div, txt);
     div.style.display = "none";
@@ -2343,7 +2450,7 @@
   }
   function renderInstruction(div, txt) {
     div.replaceChildren();
-    var paragraph = document.createElement("p");
+    var paragraph = div.ownerDocument.createElement("p");
     paragraph.textContent = txt;
     div.appendChild(paragraph);
   }
@@ -2351,14 +2458,19 @@
   /**
    * Will make the screen reader alert the provided text to the user
    * @param {string} txt
+   * @param {Document} [doc] - the document to announce in, for a zone in another window such as an iframe or a popup.
+   * Defaults to the document that loaded this module.
    */
-  function alertToScreenReader(txt) {
+  function alertToScreenReader(txt, doc) {
     if (isOnServer) return;
-    if (!alertsDiv) {
-      initAriaOnBrowser();
+    // eslint-disable-next-line no-restricted-globals -- the documented default
+    doc = doc || document;
+    if (!docToAlertsDiv.has(doc)) {
+      initAriaOnBrowser(doc);
     }
+    var alertsDiv = docToAlertsDiv.get(doc);
     alertsDiv.innerHTML = "";
-    var alertText = document.createTextNode(txt);
+    var alertText = doc.createTextNode(txt);
     alertsDiv.appendChild(alertText);
     // this is needed for Safari
     alertsDiv.style.display = "none";
@@ -2428,12 +2540,14 @@
   }
   function refreshInstructions() {
     if (isOnServer) return;
-    Object.entries(INSTRUCTION_ID_TO_STRING_KEY).forEach(function (_ref9) {
-      var _ref10 = _slicedToArray(_ref9, 2),
-        id = _ref10[0],
-        key = _ref10[1];
-      var div = document.getElementById(id);
-      if (div) renderInstruction(div, formatWithFallback(key, instructionCtx));
+    docToAlertsDiv.forEach(function (alertsDiv, doc) {
+      return Object.entries(INSTRUCTION_ID_TO_STRING_KEY).forEach(function (_ref9) {
+        var _ref10 = _slicedToArray(_ref9, 2),
+          id = _ref10[0],
+          key = _ref10[1];
+        var div = doc.getElementById(id);
+        if (div) renderInstruction(div, formatWithFallback(key, instructionCtx));
+      });
     });
   }
 
@@ -2453,9 +2567,10 @@
    * escape because this function runs during the drag lifecycle.
    * @param {string} key - one of the keys accepted by setAriaStrings
    * @param {Object} [ctx] - the interpolation context for that key
+   * @param {Document} [doc] - the document of the zone the message is about, defaults to the one that loaded this module
    */
-  function announceToScreenReader(key, ctx) {
-    alertToScreenReader(formatWithFallback(key, ctx));
+  function announceToScreenReader(key, ctx, doc) {
+    alertToScreenReader(formatWithFallback(key, ctx), doc);
   }
 
   var activeTrigger = DEFAULT_KEYBOARD_DRAG_TRIGGER;
@@ -2503,12 +2618,20 @@
   var focusedItem;
   var focusedItemId;
   var focusedItemLabel = "";
+  // Like pointer dragging, a keyboard drag only has destinations in the document it started in.
+  var dragDocument;
   var allDragTargets = new WeakSet();
   var elToKeyDownListeners = new WeakMap();
   var elToFocusListeners = new WeakMap();
   var dzToHandles = new Map();
   var dzToConfig = new Map();
   var typeToDropZones = new Map();
+  // Each document with zones gets its own aria elements, because a zone can live in another window than the one that loaded
+  // this module. That document and the same-origin documents around it, up to the loading document, get keydown, click and
+  // pagehide handlers, so that Escape and a click outside end a drag from any of them. A zone is released from the documents
+  // it registered with, even if it has moved to another document since.
+  var dzToDocuments = new Map();
+  var documentToRegistration = new Map();
 
   /* TODO (potentially)
    * what's the deal with the black border of voice-reader not following focus?
@@ -2518,18 +2641,83 @@
   var INSTRUCTION_IDs;
 
   /* drop-zones registration management */
+  function getDocumentsAround(doc) {
+    var docs = [doc];
+    // eslint-disable-next-line no-restricted-globals -- the documents above the loading one belong to whatever hosts the app
+    for (var frame = (_doc$defaultView = doc.defaultView) === null || _doc$defaultView === void 0 ? void 0 : _doc$defaultView.frameElement; frame && docs[docs.length - 1] !== document; frame = getWindowOf(frame).frameElement) {
+      var _doc$defaultView;
+      docs.push(frame.ownerDocument);
+    }
+    return docs;
+  }
+  function retainDocuments(dropZoneEl) {
+    var docs = getDocumentsAround(dropZoneEl.ownerDocument);
+    docs.forEach(function (doc, idx) {
+      var registration = documentToRegistration.get(doc);
+      if (!registration) {
+        printDebug(function () {
+          return "adding global keydown and click handlers";
+        });
+        // Handlers of its own, so that removing them through a window that has since navigated to another document
+        // leaves the handlers of that document alone
+        var handlers = {
+          keydown: globalKeyDownHandler,
+          click: globalClickHandler,
+          pagehide: handleWindowHidden
+        };
+        registration = {
+          win: doc.defaultView,
+          zoneCount: 0,
+          documentCount: 0,
+          handlers: {}
+        };
+        Object.entries(handlers).forEach(function (_ref) {
+          var _registration$win;
+          var _ref2 = _slicedToArray(_ref, 2),
+            type = _ref2[0],
+            handler = _ref2[1];
+          registration.handlers[type] = function (e) {
+            return handler(e);
+          };
+          (_registration$win = registration.win) === null || _registration$win === void 0 ? void 0 : _registration$win.addEventListener(type, registration.handlers[type]);
+        });
+        documentToRegistration.set(doc, registration);
+      }
+      registration.documentCount++;
+      if (idx === 0 && registration.zoneCount++ === 0) {
+        INSTRUCTION_IDs = initAria(doc);
+      }
+    });
+    dzToDocuments.set(dropZoneEl, docs);
+  }
+  function releaseDocuments(dropZoneEl) {
+    var docs = dzToDocuments.get(dropZoneEl);
+    if (!docs) return;
+    dzToDocuments["delete"](dropZoneEl);
+    docs.forEach(function (doc, idx) {
+      var registration = documentToRegistration.get(doc);
+      if (idx === 0 && --registration.zoneCount === 0) {
+        destroyAria(doc);
+      }
+      if (--registration.documentCount > 0) return;
+      printDebug(function () {
+        return "removing global keydown and click handlers";
+      });
+      documentToRegistration["delete"](doc);
+      Object.entries(registration.handlers).forEach(function (_ref3) {
+        var _registration$win2;
+        var _ref4 = _slicedToArray(_ref3, 2),
+          type = _ref4[0],
+          handler = _ref4[1];
+        return (_registration$win2 = registration.win) === null || _registration$win2 === void 0 ? void 0 : _registration$win2.removeEventListener(type, handler);
+      });
+    });
+  }
   function registerDropZone(dropZoneEl, type) {
+    var _dzToDocuments$get;
     printDebug(function () {
       return "registering drop-zone if absent";
     });
-    if (typeToDropZones.size === 0) {
-      printDebug(function () {
-        return "adding global keydown and click handlers";
-      });
-      INSTRUCTION_IDs = initAria();
-      window.addEventListener("keydown", globalKeyDownHandler);
-      window.addEventListener("click", globalClickHandler);
-    }
     if (!typeToDropZones.has(type)) {
       typeToDropZones.set(type, new Set());
     }
@@ -2537,6 +2725,11 @@
       typeToDropZones.get(type).add(dropZoneEl);
       incrementActiveDropZoneCount();
     }
+    // a zone that moved to another document since it registered takes its registration along
+    if (((_dzToDocuments$get = dzToDocuments.get(dropZoneEl)) === null || _dzToDocuments$get === void 0 ? void 0 : _dzToDocuments$get[0]) !== dropZoneEl.ownerDocument) {
+      releaseDocuments(dropZoneEl);
+      retainDocuments(dropZoneEl);
+    }
   }
   function unregisterDropZone(dropZoneEl, type) {
     printDebug(function () {
@@ -2551,15 +2744,7 @@
     if (dropZones.size === 0) {
       typeToDropZones["delete"](type);
     }
-    if (typeToDropZones.size === 0) {
-      printDebug(function () {
-        return "removing global keydown and click handlers";
-      });
-      window.removeEventListener("keydown", globalKeyDownHandler);
-      window.removeEventListener("click", globalClickHandler);
-      INSTRUCTION_IDs = undefined;
-      destroyAria();
-    }
+    releaseDocuments(dropZoneEl);
   }
   function globalKeyDownHandler(e) {
     if (!isDragging) return;
@@ -2571,21 +2756,50 @@
         }
     }
   }
-  function globalClickHandler() {
+  function globalClickHandler(e) {
     if (!isDragging) return;
-    if (!allDragTargets.has(document.activeElement)) {
+    if (!allDragTargets.has(e.currentTarget.document.activeElement)) {
       printDebug(function () {
         return "clicked outside of any draggable";
       });
       handleDrop();
     }
   }
-  function getActiveDragTabIndex(dropZoneEl, config) {
-    return dropZoneEl === focusedDz || focusedItem.contains(dropZoneEl) || config.dropFromOthersDisabled || config.type !== draggedItemType ? -1 : 0;
+
+  // The focused zone's window is going away: it was closed or navigated, or its iframe was removed. End the drag so the
+  // zones in the other windows become tab stops again.
+  function handleWindowHidden(e) {
+    if (isDragging && focusedDz && getWindowOf(focusedDz) === e.currentTarget) {
+      printDebug(function () {
+        return "the focused zone's window is going away";
+      });
+      handleDrop();
+    }
+  }
+
+  // Tab can cross iframe boundaries, but a destination must still belong to the drag's own document.
+  function isInDragDocument(dropZoneEl) {
+    var doc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : dragDocument;
+    return dropZoneEl.ownerDocument === doc;
+  }
+  function isAboveOrLeftOf(el, otherEl) {
+    var position = el.getBoundingClientRect();
+    var otherPosition = otherEl.getBoundingClientRect();
+    return position.top < otherPosition.top || position.left < otherPosition.left;
+  }
+
+  // Tab order, focus-driven transfers, styling and announcements must agree about which zones can receive the item.
+  // tabindex=-1 alone is not a restriction: a click or consumer code can still focus a zone.
+  function isKeyboardDropTarget(dropZoneEl) {
+    var config = dzToConfig.get(dropZoneEl);
+    return config.type === draggedItemType && !config.dropFromOthersDisabled && !focusedItem.contains(dropZoneEl) && isInDragDocument(dropZoneEl);
+  }
+  function getActiveDragTabIndex(dropZoneEl) {
+    return dropZoneEl !== focusedDz && isKeyboardDropTarget(dropZoneEl) ? 0 : -1;
   }
   function refreshActiveDragTabIndices() {
-    dzToConfig.forEach(function (config, dropZoneEl) {
-      dropZoneEl.tabIndex = getActiveDragTabIndex(dropZoneEl, config);
+    dzToConfig.forEach(function (_, dropZoneEl) {
+      dropZoneEl.tabIndex = getActiveDragTabIndex(dropZoneEl);
     });
   }
   function grabIsAlive() {
@@ -2605,8 +2819,10 @@
     });
     if (!isDragging) return;
     var newlyFocusedDz = e.currentTarget;
-    if (newlyFocusedDz === focusedDz) return;
+    if (newlyFocusedDz === focusedDz || !isKeyboardDropTarget(newlyFocusedDz)) return;
     if (!grabIsAlive()) return;
+    var dzFrom = focusedDz;
+    var movedItemId = focusedItemId;
     focusedDzLabel = newlyFocusedDz.getAttribute("aria-label") || "";
     var _dzToConfig$get = dzToConfig.get(focusedDz),
       originItems = _dzToConfig$get.items;
@@ -2618,7 +2834,7 @@
     var _dzToConfig$get2 = dzToConfig.get(newlyFocusedDz),
       targetItems = _dzToConfig$get2.items,
       autoAriaDisabled = _dzToConfig$get2.autoAriaDisabled;
-    if (newlyFocusedDz.getBoundingClientRect().top < focusedDz.getBoundingClientRect().top || newlyFocusedDz.getBoundingClientRect().left < focusedDz.getBoundingClientRect().left) {
+    if (isAboveOrLeftOf(newlyFocusedDz, focusedDz)) {
       targetItems.push(itemToMove);
       if (!autoAriaDisabled) {
         announceToScreenReader("movedToZoneEnd", {
@@ -2626,7 +2842,7 @@
           zoneLabel: focusedDzLabel,
           position: targetItems.length,
           count: targetItems.length
-        });
+        }, newlyFocusedDz.ownerDocument);
       }
     } else {
       targetItems.unshift(itemToMove);
@@ -2636,12 +2852,11 @@
           zoneLabel: focusedDzLabel,
           position: 1,
           count: targetItems.length
-        });
+        }, newlyFocusedDz.ownerDocument);
       }
     }
-    var dzFrom = focusedDz;
-    var movedItemId = focusedItemId;
-    focusedDz = newlyFocusedDz;
+    // An announcement formatter can end the drag, for example by removing its window. The item still moves.
+    if (isDragging) focusedDz = newlyFocusedDz;
     dispatchFinalizeEvent(dzFrom, originItems, {
       trigger: TRIGGERS.DROPPED_INTO_ANOTHER,
       id: movedItemId,
@@ -2656,8 +2871,8 @@
     }
   }
   function triggerAllDzsUpdate() {
-    dzToHandles.forEach(function (_ref, dz) {
-      var update = _ref.update;
+    dzToHandles.forEach(function (_ref5, dz) {
+      var update = _ref5.update;
       return update(dzToConfig.get(dz));
     });
   }
@@ -2672,6 +2887,20 @@
     var droppedItemId = focusedItemId;
     var droppedItemType = draggedItemType;
     if (!droppedConfig) return;
+    var droppedItemLabel = focusedItemLabel;
+    var droppedDzLabel = focusedDzLabel;
+    var droppedDocument = dragDocument;
+    // Clear global drag state before running any consumer code: an announcement formatter, a blur handler or a consider
+    // handler. A synchronous handler may destroy the focused zone or remove its window, and neither must recursively
+    // enter handleDrop.
+    focusedItem = null;
+    focusedItemId = null;
+    focusedItemLabel = "";
+    draggedItemType = null;
+    focusedDz = null;
+    focusedDzLabel = "";
+    dragDocument = undefined;
+    isDragging = false;
     if (!droppedConfig.autoAriaDisabled) {
       // Include the destination and final position so localized messages can describe the completed drop.
       var droppedItems = droppedConfig.items;
@@ -2679,24 +2908,16 @@
         return item[ITEM_ID_KEY] === droppedItemId;
       });
       announceToScreenReader("dropped", {
-        itemLabel: focusedItemLabel,
-        zoneLabel: focusedDzLabel,
+        itemLabel: droppedItemLabel,
+        zoneLabel: droppedDzLabel,
         position: (droppedIdx < 0 ? 0 : droppedIdx) + 1,
         count: droppedItems.length
-      });
+      }, droppedDz.ownerDocument);
     }
-    if (allDragTargets.has(document.activeElement)) {
-      document.activeElement.blur();
+    var activeElement = droppedDz.ownerDocument.activeElement;
+    if (allDragTargets.has(activeElement)) {
+      activeElement.blur();
     }
-    // Clear global drag state before dispatching. A synchronous handler may destroy the
-    // focused zone, and unregisterDropZone must not recursively enter handleDrop.
-    focusedItem = null;
-    focusedItemId = null;
-    focusedItemLabel = "";
-    draggedItemType = null;
-    focusedDz = null;
-    focusedDzLabel = "";
-    isDragging = false;
     if (dispatchConsider) {
       dispatchConsiderEvent(droppedDz, droppedConfig.items, {
         trigger: TRIGGERS.DRAG_STOPPED,
@@ -2706,7 +2927,9 @@
     }
     var dropZones = typeToDropZones.get(droppedItemType);
     if (dropZones) {
-      styleInactiveDropZones(dropZones, function (dz) {
+      styleInactiveDropZones(Array.from(dropZones).filter(function (dz) {
+        return isInDragDocument(dz, droppedDocument);
+      }), function (dz) {
         return dzToConfig.get(dz).dropTargetStyle;
       }, function (dz) {
         return dzToConfig.get(dz).dropTargetClasses;
@@ -2732,6 +2955,10 @@
       if (arr.length <= 1) return;
       arr.splice(j, 1, arr.splice(i, 1, arr[j])[0]);
     }
+    function ownsArrowKey(e) {
+      // Only the grabbed item owns reorder keys. Nested controls and other items keep their own key behaviour.
+      return isDragging && node === focusedDz && isInDragDocument(node) && e.currentTarget === focusedItem && e.target === focusedItem;
+    }
     function handleKeyDown(e) {
       printDebug(function () {
         return ["handling key down", e.key];
@@ -2762,7 +2989,7 @@
         case "ArrowDown":
         case "ArrowRight":
           {
-            if (!isDragging) return;
+            if (!ownsArrowKey(e)) return;
             e.preventDefault(); // prevent scrolling
             e.stopPropagation();
             var _dzToConfig$get3 = dzToConfig.get(node),
@@ -2779,8 +3006,10 @@
                   zoneLabel: focusedDzLabel,
                   position: idx + 2,
                   count: items.length
-                });
+                }, node.ownerDocument);
               }
+              // An announcement formatter can end or move the drag, for example by removing its window.
+              if (!ownsArrowKey(e)) break;
               swap(items, idx, idx + 1);
               dispatchFinalizeEvent(node, items, {
                 trigger: TRIGGERS.DROPPED_INTO_ZONE,
@@ -2793,7 +3022,7 @@
         case "ArrowUp":
         case "ArrowLeft":
           {
-            if (!isDragging) return;
+            if (!ownsArrowKey(e)) return;
             e.preventDefault(); // prevent scrolling
             e.stopPropagation();
             var _dzToConfig$get4 = dzToConfig.get(node),
@@ -2810,8 +3039,10 @@
                   zoneLabel: focusedDzLabel,
                   position: _idx,
                   count: _items.length
-                });
+                }, node.ownerDocument);
               }
+              // An announcement formatter can end or move the drag, for example by removing its window.
+              if (!ownsArrowKey(e)) break;
               swap(_items, _idx, _idx - 1);
               dispatchFinalizeEvent(node, _items, {
                 trigger: TRIGGERS.DROPPED_INTO_ZONE,
@@ -2832,8 +3063,9 @@
       focusedDzLabel = node.getAttribute("aria-label") || "";
       draggedItemType = config.type;
       isDragging = true;
+      dragDocument = node.ownerDocument;
       var dropTargets = Array.from(typeToDropZones.get(config.type)).filter(function (dz) {
-        return dz === focusedDz || !dzToConfig.get(dz).dropFromOthersDisabled;
+        return dz === focusedDz || isKeyboardDropTarget(dz);
       });
       styleActiveDropZones(dropTargets, function (dz) {
         return dzToConfig.get(dz).dropTargetStyle;
@@ -2852,8 +3084,10 @@
           position: (startIdx < 0 ? 0 : startIdx) + 1,
           count: startItems.length,
           canMoveBetweenZones: dropTargets.length > 1
-        });
+        }, node.ownerDocument);
       }
+      // an announcement formatter can end the drag, for example by removing its window
+      if (!isDragging) return;
       dispatchConsiderEvent(node, dzToConfig.get(node).items, {
         trigger: TRIGGERS.DRAG_STARTED,
         id: focusedItemId,
@@ -2878,25 +3112,25 @@
       focusedItemId = items[focusedItemIdx][ITEM_ID_KEY];
       focusedItemLabel = children[focusedItemIdx].getAttribute("aria-label") || "";
     }
-    function configure(_ref2) {
-      var _ref2$items = _ref2.items,
-        items = _ref2$items === void 0 ? [] : _ref2$items,
-        _ref2$type = _ref2.type,
-        newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref2$type,
-        _ref2$dragDisabled = _ref2.dragDisabled,
-        dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
-        _ref2$zoneTabIndex = _ref2.zoneTabIndex,
-        zoneTabIndex = _ref2$zoneTabIndex === void 0 ? 0 : _ref2$zoneTabIndex,
-        _ref2$zoneItemTabInde = _ref2.zoneItemTabIndex,
-        zoneItemTabIndex = _ref2$zoneItemTabInde === void 0 ? 0 : _ref2$zoneItemTabInde,
-        _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
-        dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
-        _ref2$dropTargetStyle = _ref2.dropTargetStyle,
-        dropTargetStyle = _ref2$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref2$dropTargetStyle,
-        _ref2$dropTargetClass = _ref2.dropTargetClasses,
-        dropTargetClasses = _ref2$dropTargetClass === void 0 ? [] : _ref2$dropTargetClass,
-        _ref2$autoAriaDisable = _ref2.autoAriaDisabled,
-        autoAriaDisabled = _ref2$autoAriaDisable === void 0 ? false : _ref2$autoAriaDisable;
+    function configure(_ref6) {
+      var _ref6$items = _ref6.items,
+        items = _ref6$items === void 0 ? [] : _ref6$items,
+        _ref6$type = _ref6.type,
+        newType = _ref6$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref6$type,
+        _ref6$dragDisabled = _ref6.dragDisabled,
+        dragDisabled = _ref6$dragDisabled === void 0 ? false : _ref6$dragDisabled,
+        _ref6$zoneTabIndex = _ref6.zoneTabIndex,
+        zoneTabIndex = _ref6$zoneTabIndex === void 0 ? 0 : _ref6$zoneTabIndex,
+        _ref6$zoneItemTabInde = _ref6.zoneItemTabIndex,
+        zoneItemTabIndex = _ref6$zoneItemTabInde === void 0 ? 0 : _ref6$zoneItemTabInde,
+        _ref6$dropFromOthersD = _ref6.dropFromOthersDisabled,
+        dropFromOthersDisabled = _ref6$dropFromOthersD === void 0 ? false : _ref6$dropFromOthersD,
+        _ref6$dropTargetStyle = _ref6.dropTargetStyle,
+        dropTargetStyle = _ref6$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref6$dropTargetStyle,
+        _ref6$dropTargetClass = _ref6.dropTargetClasses,
+        dropTargetClasses = _ref6$dropTargetClass === void 0 ? [] : _ref6$dropTargetClass,
+        _ref6$autoAriaDisable = _ref6.autoAriaDisabled,
+        autoAriaDisabled = _ref6$autoAriaDisable === void 0 ? false : _ref6$autoAriaDisable;
       config.items = _toConsumableArray(items);
       config.dragDisabled = dragDisabled;
       config.dropFromOthersDisabled = dropFromOthersDisabled;
@@ -2917,14 +3151,14 @@
       dzToConfig.set(node, config);
       var itemMovedToThisZone = false;
       if (isDragging) {
-        itemMovedToThisZone = config.type === draggedItemType && config.items.some(function (item) {
+        itemMovedToThisZone = isInDragDocument(node) && config.type === draggedItemType && config.items.some(function (item) {
           return item[ITEM_ID_KEY] === focusedItemId;
         }) && node !== focusedDz;
         if (itemMovedToThisZone) {
           focusedDz = node;
           focusedDzLabel = node.getAttribute("aria-label") || "";
         }
-        node.tabIndex = getActiveDragTabIndex(node, config);
+        node.tabIndex = getActiveDragTabIndex(node);
       } else {
         node.tabIndex = config.zoneTabIndex;
       }
@@ -2945,7 +3179,7 @@
           draggableEl.addEventListener("click", handleClick);
           elToFocusListeners.set(draggableEl, handleClick);
         }
-        if (isDragging && config.type === draggedItemType && ((_config$items$i = config.items[i]) === null || _config$items$i === void 0 ? void 0 : _config$items$i[ITEM_ID_KEY]) === focusedItemId) {
+        if (isDragging && isInDragDocument(node) && config.type === draggedItemType && ((_config$items$i = config.items[i]) === null || _config$items$i === void 0 ? void 0 : _config$items$i[ITEM_ID_KEY]) === focusedItemId) {
           printDebug(function () {
             return ["focusing on", {
               i: i,
@@ -2962,7 +3196,8 @@
       for (var i = 0; i < node.children.length; i++) {
         _loop(i);
       }
-      if (itemMovedToThisZone) {
+      // Focusing the replacement item runs its focus handler, which can end the drag, for example by removing its window
+      if (itemMovedToThisZone && isDragging) {
         // Nested actions are configured before their parent action. Refresh only
         // after focusedItem points at the replacement so nested zones stay untabbable.
         refreshActiveDragTabIndices();
@@ -3219,22 +3454,27 @@
    */
   function dragHandle(handle) {
     handle.setAttribute("role", "button");
+    var releaseWindow;
     function startDrag(e) {
       // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
       e.preventDefault();
       isItemsDragDisabled.set(false);
 
-      // Reset the startDrag/isItemsDragDisabled if the user releases the mouse/touch without initiating a drag
-      window.addEventListener("mouseup", resetStartDrag);
-      window.addEventListener("touchend", resetStartDrag);
+      // Reset the startDrag/isItemsDragDisabled if the user releases the mouse/touch without initiating a drag, or if the
+      // handle's window goes away first
+      releaseWindow = getWindowOf(handle);
+      releaseWindow.addEventListener("mouseup", resetStartDrag);
+      releaseWindow.addEventListener("touchend", resetStartDrag);
+      releaseWindow.addEventListener("pagehide", resetStartDrag);
     }
     function handleKeyDown(e) {
       if (isKeyboardDragTriggerKey(e.key)) isItemsDragDisabled.set(false);
     }
     function resetStartDrag() {
       isItemsDragDisabled.set(true);
-      window.removeEventListener("mouseup", resetStartDrag);
-      window.removeEventListener("touchend", resetStartDrag);
+      releaseWindow.removeEventListener("mouseup", resetStartDrag);
+      releaseWindow.removeEventListener("touchend", resetStartDrag);
+      releaseWindow.removeEventListener("pagehide", resetStartDrag);
     }
     var recomputeHandleState = function recomputeHandleState() {
       var userDisabled = userDragDisabled.get();