@angular/cdk 9.1.3 → 9.2.2

package/bundles/cdk-drag-drop.umd.js

@@ -78,6 +78,138 @@
         return value.split(',').map(function (part) { return part.trim(); });
     }
 
+    /**
+     * @license
+     * Copyright Google LLC All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+    /** Gets a mutable version of an element's bounding `ClientRect`. */
+    function getMutableClientRect(element) {
+        var clientRect = element.getBoundingClientRect();
+        // We need to clone the `clientRect` here, because all the values on it are readonly
+        // and we need to be able to update them. Also we can't use a spread here, because
+        // the values on a `ClientRect` aren't own properties. See:
+        // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes
+        return {
+            top: clientRect.top,
+            right: clientRect.right,
+            bottom: clientRect.bottom,
+            left: clientRect.left,
+            width: clientRect.width,
+            height: clientRect.height
+        };
+    }
+    /**
+     * Checks whether some coordinates are within a `ClientRect`.
+     * @param clientRect ClientRect that is being checked.
+     * @param x Coordinates along the X axis.
+     * @param y Coordinates along the Y axis.
+     */
+    function isInsideClientRect(clientRect, x, y) {
+        var top = clientRect.top, bottom = clientRect.bottom, left = clientRect.left, right = clientRect.right;
+        return y >= top && y <= bottom && x >= left && x <= right;
+    }
+    /**
+     * Updates the top/left positions of a `ClientRect`, as well as their bottom/right counterparts.
+     * @param clientRect `ClientRect` that should be updated.
+     * @param top Amount to add to the `top` position.
+     * @param left Amount to add to the `left` position.
+     */
+    function adjustClientRect(clientRect, top, left) {
+        clientRect.top += top;
+        clientRect.bottom = clientRect.top + clientRect.height;
+        clientRect.left += left;
+        clientRect.right = clientRect.left + clientRect.width;
+    }
+    /**
+     * Checks whether the pointer coordinates are close to a ClientRect.
+     * @param rect ClientRect to check against.
+     * @param threshold Threshold around the ClientRect.
+     * @param pointerX Coordinates along the X axis.
+     * @param pointerY Coordinates along the Y axis.
+     */
+    function isPointerNearClientRect(rect, threshold, pointerX, pointerY) {
+        var top = rect.top, right = rect.right, bottom = rect.bottom, left = rect.left, width = rect.width, height = rect.height;
+        var xThreshold = width * threshold;
+        var yThreshold = height * threshold;
+        return pointerY > top - yThreshold && pointerY < bottom + yThreshold &&
+            pointerX > left - xThreshold && pointerX < right + xThreshold;
+    }
+
+    /**
+     * @license
+     * Copyright Google LLC All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+    /** Keeps track of the scroll position and dimensions of the parents of an element. */
+    var ParentPositionTracker = /** @class */ (function () {
+        function ParentPositionTracker(_document, _viewportRuler) {
+            this._document = _document;
+            this._viewportRuler = _viewportRuler;
+            /** Cached positions of the scrollable parent elements. */
+            this.positions = new Map();
+        }
+        /** Clears the cached positions. */
+        ParentPositionTracker.prototype.clear = function () {
+            this.positions.clear();
+        };
+        /** Caches the positions. Should be called at the beginning of a drag sequence. */
+        ParentPositionTracker.prototype.cache = function (elements) {
+            var _this = this;
+            this.clear();
+            this.positions.set(this._document, {
+                scrollPosition: this._viewportRuler.getViewportScrollPosition(),
+            });
+            elements.forEach(function (element) {
+                _this.positions.set(element, {
+                    scrollPosition: { top: element.scrollTop, left: element.scrollLeft },
+                    clientRect: getMutableClientRect(element)
+                });
+            });
+        };
+        /** Handles scrolling while a drag is taking place. */
+        ParentPositionTracker.prototype.handleScroll = function (event) {
+            var target = event.target;
+            var cachedPosition = this.positions.get(target);
+            if (!cachedPosition) {
+                return null;
+            }
+            // Used when figuring out whether an element is inside the scroll parent. If the scrolled
+            // parent is the `document`, we use the `documentElement`, because IE doesn't support
+            // `contains` on the `document`.
+            var scrolledParentNode = target === this._document ? target.documentElement : target;
+            var scrollPosition = cachedPosition.scrollPosition;
+            var newTop;
+            var newLeft;
+            if (target === this._document) {
+                var viewportScrollPosition = this._viewportRuler.getViewportScrollPosition();
+                newTop = viewportScrollPosition.top;
+                newLeft = viewportScrollPosition.left;
+            }
+            else {
+                newTop = target.scrollTop;
+                newLeft = target.scrollLeft;
+            }
+            var topDifference = scrollPosition.top - newTop;
+            var leftDifference = scrollPosition.left - newLeft;
+            // Go through and update the cached positions of the scroll
+            // parents that are inside the element that was scrolled.
+            this.positions.forEach(function (position, node) {
+                if (position.clientRect && target !== node && scrolledParentNode.contains(node)) {
+                    adjustClientRect(position.clientRect, topDifference, leftDifference);
+                }
+            });
+            scrollPosition.top = newTop;
+            scrollPosition.left = newLeft;
+            return { top: topDifference, left: leftDifference };
+        };
+        return ParentPositionTracker;
+    }());
+
     /**
      * @license
      * Copyright Google LLC All Rights Reserved.
@@ -183,8 +315,8 @@
                 // Prevent the default action as early as possible in order to block
                 // native actions like dragging the selected text or images with the mouse.
                 event.preventDefault();
+                var pointerPosition = _this._getPointerPositionOnPage(event);
                 if (!_this._hasStartedDragging) {
-                    var pointerPosition = _this._getPointerPositionOnPage(event);
                     var distanceX = Math.abs(pointerPosition.x - _this._pickupPositionOnPage.x);
                     var distanceY = Math.abs(pointerPosition.y - _this._pickupPositionOnPage.y);
                     var isOverThreshold = distanceX + distanceY >= _this._config.dragStartThreshold;
@@ -216,7 +348,7 @@
                         _this._previewRect = (_this._preview || _this._rootElement).getBoundingClientRect();
                     }
                 }
-                var constrainedPointerPosition = _this._getConstrainedPointerPosition(event);
+                var constrainedPointerPosition = _this._getConstrainedPointerPosition(pointerPosition);
                 _this._hasMoved = true;
                 _this._updatePointerDirectionDelta(constrainedPointerPosition);
                 if (_this._dropContainer) {
@@ -255,6 +387,7 @@
                 _this._endDragSequence(event);
             };
             this.withRootElement(element);
+            this._parentPositions = new ParentPositionTracker(_document, _viewportRuler);
             _dragDropRegistry.registerDragItem(this);
         }
         Object.defineProperty(DragRef.prototype, "disabled", {
@@ -319,13 +452,16 @@
          * dragging on an element that you might not have access to.
          */
         DragRef.prototype.withRootElement = function (rootElement) {
+            var _this = this;
             var element = coercion.coerceElement(rootElement);
             if (element !== this._rootElement) {
                 if (this._rootElement) {
                     this._removeRootElementListeners(this._rootElement);
                 }
-                element.addEventListener('mousedown', this._pointerDown, activeEventListenerOptions);
-                element.addEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);
+                this._ngZone.runOutsideAngular(function () {
+                    element.addEventListener('mousedown', _this._pointerDown, activeEventListenerOptions);
+                    element.addEventListener('touchstart', _this._pointerDown, passiveEventListenerOptions);
+                });
                 this._initialTransform = undefined;
                 this._rootElement = element;
             }
@@ -372,6 +508,7 @@
             this._disabledHandles.clear();
             this._dropContainer = undefined;
             this._resizeSubscription.unsubscribe();
+            this._parentPositions.clear();
             this._boundaryElement = this._rootElement = this._placeholderTemplate =
                 this._previewTemplate = this._anchor = null;
         };
@@ -434,7 +571,7 @@
         DragRef.prototype._sortFromLastPointerPosition = function () {
             var position = this._pointerPositionAtLastDirectionChange;
             if (position && this._dropContainer) {
-                this._updateActiveDropContainer(position);
+                this._updateActiveDropContainer(this._getConstrainedPointerPosition(position));
             }
         };
         /** Unsubscribes from the global subscriptions. */
@@ -519,7 +656,8 @@
                 this._lastTouchEventTime = Date.now();
             }
             this._toggleNativeDragInteractions();
-            if (this._dropContainer) {
+            var dropContainer = this._dropContainer;
+            if (dropContainer) {
                 var element = this._rootElement;
                 var parent_1 = element.parentNode;
                 var preview = this._preview = this._createPreviewElement();
@@ -533,13 +671,16 @@
                 element.style.display = 'none';
                 this._document.body.appendChild(parent_1.replaceChild(placeholder, element));
                 getPreviewInsertionPoint(this._document).appendChild(preview);
-                this._dropContainer.start();
-                this._initialContainer = this._dropContainer;
-                this._initialIndex = this._dropContainer.getItemIndex(this);
+                dropContainer.start();
+                this._initialContainer = dropContainer;
+                this._initialIndex = dropContainer.getItemIndex(this);
             }
             else {
                 this._initialContainer = this._initialIndex = undefined;
             }
+            // Important to run after we've called `start` on the parent container
+            // so that it has had time to resolve its scrollable parents.
+            this._parentPositions.cache(dropContainer ? dropContainer.getScrollableParents() : []);
         };
         /**
          * Sets up the different variables and subscriptions
@@ -585,11 +726,11 @@
             this._removeSubscriptions();
             this._pointerMoveSubscription = this._dragDropRegistry.pointerMove.subscribe(this._pointerMove);
             this._pointerUpSubscription = this._dragDropRegistry.pointerUp.subscribe(this._pointerUp);
-            this._scrollSubscription = this._dragDropRegistry.scroll.pipe(operators.startWith(null)).subscribe(function () {
-                _this._scrollPosition = _this._viewportRuler.getViewportScrollPosition();
+            this._scrollSubscription = this._dragDropRegistry.scroll.subscribe(function (scrollEvent) {
+                _this._updateOnScroll(scrollEvent);
             });
             if (this._boundaryElement) {
-                this._boundaryRect = this._boundaryElement.getBoundingClientRect();
+                this._boundaryRect = getMutableClientRect(this._boundaryElement);
             }
             // If we have a custom preview we can't know ahead of time how large it'll be so we position
             // it next to the cursor. The exception is when the consumer has opted into making the preview
@@ -686,13 +827,16 @@
             var previewClass = this.previewClass;
             var previewTemplate = previewConfig ? previewConfig.template : null;
             var preview;
-            if (previewTemplate) {
+            if (previewTemplate && previewConfig) {
+                // Measure the element before we've inserted the preview
+                // since the insertion could throw off the measurement.
+                var rootRect = previewConfig.matchSize ? this._rootElement.getBoundingClientRect() : null;
                 var viewRef = previewConfig.viewContainer.createEmbeddedView(previewTemplate, previewConfig.context);
                 viewRef.detectChanges();
                 preview = getRootNode(viewRef, this._document);
                 this._previewRef = viewRef;
                 if (previewConfig.matchSize) {
-                    matchElementSize(preview, this._rootElement);
+                    matchElementSize(preview, rootRect);
                 }
                 else {
                     preview.style.transform =
@@ -702,7 +846,7 @@
             else {
                 var element = this._rootElement;
                 preview = deepCloneNode(element);
-                matchElementSize(preview, element);
+                matchElementSize(preview, element.getBoundingClientRect());
             }
             extendStyles(preview.style, {
                 // It's important that we disable the pointer events on the preview, because
@@ -713,7 +857,7 @@
                 position: 'fixed',
                 top: '0',
                 left: '0',
-                zIndex: '1000'
+                zIndex: "" + (this._config.zIndex || 1000)
             });
             toggleNativeDragInteractions(preview, false);
             preview.classList.add('cdk-drag-preview');
@@ -794,8 +938,9 @@
             var handleElement = referenceElement === this._rootElement ? null : referenceElement;
             var referenceRect = handleElement ? handleElement.getBoundingClientRect() : elementRect;
             var point = isTouchEvent(event) ? event.targetTouches[0] : event;
-            var x = point.pageX - referenceRect.left - this._scrollPosition.left;
-            var y = point.pageY - referenceRect.top - this._scrollPosition.top;
+            var scrollPosition = this._getViewportScrollPosition();
+            var x = point.pageX - referenceRect.left - scrollPosition.left;
+            var y = point.pageY - referenceRect.top - scrollPosition.top;
             return {
                 x: referenceRect.left - elementRect.left + x,
                 y: referenceRect.top - elementRect.top + y
@@ -805,14 +950,14 @@
         DragRef.prototype._getPointerPositionOnPage = function (event) {
             // `touches` will be empty for start/end events so we have to fall back to `changedTouches`.
             var point = isTouchEvent(event) ? (event.touches[0] || event.changedTouches[0]) : event;
+            var scrollPosition = this._getViewportScrollPosition();
             return {
-                x: point.pageX - this._scrollPosition.left,
-                y: point.pageY - this._scrollPosition.top
+                x: point.pageX - scrollPosition.left,
+                y: point.pageY - scrollPosition.top
             };
         };
         /** Gets the pointer position on the page, accounting for any position constraints. */
-        DragRef.prototype._getConstrainedPointerPosition = function (event) {
-            var point = this._getPointerPositionOnPage(event);
+        DragRef.prototype._getConstrainedPointerPosition = function (point) {
             var constrainedPoint = this.constrainPosition ? this.constrainPosition(point, this) : point;
             var dropContainerLock = this._dropContainer ? this._dropContainer.lockAxis : null;
             if (this.lockAxis === 'x' || dropContainerLock === 'x') {
@@ -904,6 +1049,7 @@
         /** Cleans up any cached element dimensions that we don't need after dragging has stopped. */
         DragRef.prototype._cleanupCachedDimensions = function () {
             this._boundaryRect = this._previewRect = undefined;
+            this._parentPositions.clear();
         };
         /**
          * Checks whether the element is still inside its boundary after the viewport has been resized.
@@ -967,6 +1113,21 @@
             }
             return value ? value.mouse : 0;
         };
+        /** Updates the internal state of the draggable element when scrolling has occurred. */
+        DragRef.prototype._updateOnScroll = function (event) {
+            var scrollDifference = this._parentPositions.handleScroll(event);
+            // ClientRect dimensions are based on the page's scroll position so
+            // we have to update the cached boundary ClientRect if the user has scrolled.
+            if (this._boundaryRect && scrollDifference) {
+                adjustClientRect(this._boundaryRect, scrollDifference.top, scrollDifference.left);
+            }
+        };
+        /** Gets the scroll position of the viewport. */
+        DragRef.prototype._getViewportScrollPosition = function () {
+            var cachedPosition = this._parentPositions.positions.get(this._document);
+            return cachedPosition ? cachedPosition.scrollPosition :
+                this._viewportRuler.getViewportScrollPosition();
+        };
         return DragRef;
     }());
     /**
@@ -1038,21 +1199,20 @@
      * If the root is not an HTML element it gets wrapped in one.
      */
     function getRootNode(viewRef, _document) {
-        var rootNode = viewRef.rootNodes[0];
-        if (rootNode.nodeType !== _document.ELEMENT_NODE) {
-            var wrapper = _document.createElement('div');
-            wrapper.appendChild(rootNode);
-            return wrapper;
+        var rootNodes = viewRef.rootNodes;
+        if (rootNodes.length === 1 && rootNodes[0].nodeType === _document.ELEMENT_NODE) {
+            return rootNodes[0];
         }
-        return rootNode;
+        var wrapper = _document.createElement('div');
+        rootNodes.forEach(function (node) { return wrapper.appendChild(node); });
+        return wrapper;
     }
     /**
      * Matches the target element's size to the source's size.
      * @param target Element that needs to be resized.
-     * @param source Element whose size needs to be matched.
+     * @param sourceRect Dimensions of the source element.
      */
-    function matchElementSize(target, source) {
-        var sourceRect = source.getBoundingClientRect();
+    function matchElementSize(target, sourceRect) {
         target.style.width = sourceRect.width + "px";
         target.style.height = sourceRect.height + "px";
         target.style.transform = getTransform(sourceRect.left, sourceRect.top);
@@ -1379,8 +1539,6 @@
             this._isDragging = false;
             /** Cache of the dimensions of all the items inside the container. */
             this._itemPositions = [];
-            /** Cached positions of the scrollable parent elements. */
-            this._parentPositions = new Map();
             /**
              * Keeps track of the item that was last swapped with the dragged item, as
              * well as what direction the pointer was moving in when the swap occured.
@@ -1429,6 +1587,7 @@
             this._document = _document;
             this.withScrollableParents([this.element]);
             _dragDropRegistry.registerDropContainer(this);
+            this._parentPositions = new ParentPositionTracker(_document, _viewportRuler);
         }
         /** Removes the drop list functionality from the DOM element. */
         DropListRef.prototype.dispose = function () {
@@ -1512,14 +1671,22 @@
                 activeDraggables.splice(newIndex, 0, item);
             }
             else {
-                coercion.coerceElement(this.element).appendChild(placeholder);
-                activeDraggables.push(item);
+                var element = coercion.coerceElement(this.element);
+                if (this._shouldEnterAsFirstChild(pointerX, pointerY)) {
+                    element.insertBefore(placeholder, activeDraggables[0].getRootElement());
+                    activeDraggables.unshift(item);
+                }
+                else {
+                    element.appendChild(placeholder);
+                    activeDraggables.push(item);
+                }
             }
             // The transform needs to be cleared so it doesn't throw off the measurements.
             placeholder.style.transform = '';
             // Note that the positions were already cached when we called `start` above,
-            // but we need to refresh them since the amount of items has changed.
+            // but we need to refresh them since the amount of items has changed and also parent rects.
             this._cacheItemPositions();
+            this._cacheParentPositions();
             this.entered.next({ item: item, container: this, currentIndex: this.getItemIndex(item) });
         };
         /**
@@ -1563,10 +1730,19 @@
          */
         DropListRef.prototype.withItems = function (items) {
             var _this = this;
+            var previousItems = this._draggables;
             this._draggables = items;
             items.forEach(function (item) { return item._withDropContainer(_this); });
             if (this.isDragging()) {
-                this._cacheItems();
+                var draggedItems = previousItems.filter(function (item) { return item.isDragging(); });
+                // If all of the items being dragged were removed
+                // from the list, abort the current drag sequence.
+                if (draggedItems.every(function (item) { return items.indexOf(item) === -1; })) {
+                    this._reset();
+                }
+                else {
+                    this._cacheItems();
+                }
             }
             return this;
         };
@@ -1604,6 +1780,10 @@
                 elements.indexOf(element) === -1 ? __spread([element], elements) : elements.slice();
             return this;
         };
+        /** Gets the scrollable parents that are registered with this drop container. */
+        DropListRef.prototype.getScrollableParents = function () {
+            return this._scrollableElements;
+        };
         /**
          * Figures out the index of an item in the container.
          * @param item Item whose index should be determined.
@@ -1635,7 +1815,8 @@
          */
         DropListRef.prototype._sortItem = function (item, pointerX, pointerY, pointerDelta) {
             // Don't sort the item if sorting is disabled or it's out of range.
-            if (this.sortingDisabled || !isPointerNearClientRect(this._clientRect, pointerX, pointerY)) {
+            if (this.sortingDisabled ||
+                !isPointerNearClientRect(this._clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
                 return;
             }
             var siblings = this._itemPositions;
@@ -1708,14 +1889,14 @@
             var verticalScrollDirection = 0 /* NONE */;
             var horizontalScrollDirection = 0 /* NONE */;
             // Check whether we should start scrolling any of the parent containers.
-            this._parentPositions.forEach(function (position, element) {
+            this._parentPositions.positions.forEach(function (position, element) {
                 var _a;
                 // We have special handling for the `document` below. Also this would be
                 // nicer with a  for...of loop, but it requires changing a compiler flag.
                 if (element === _this._document || !position.clientRect || scrollNode) {
                     return;
                 }
-                if (isPointerNearClientRect(position.clientRect, pointerX, pointerY)) {
+                if (isPointerNearClientRect(position.clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
                     _a = __read(getElementScrollDirections(element, position.clientRect, pointerX, pointerY), 2), verticalScrollDirection = _a[0], horizontalScrollDirection = _a[1];
                     if (verticalScrollDirection || horizontalScrollDirection) {
                         scrollNode = element;
@@ -1750,24 +1931,11 @@
         };
         /** Caches the positions of the configured scrollable parents. */
         DropListRef.prototype._cacheParentPositions = function () {
-            var _this = this;
-            this._parentPositions.clear();
-            this._parentPositions.set(this._document, {
-                scrollPosition: this._viewportRuler.getViewportScrollPosition(),
-            });
-            this._scrollableElements.forEach(function (element) {
-                var clientRect = getMutableClientRect(element);
-                // We keep the ClientRect cached in two properties, because it's referenced in a lot of
-                // performance-sensitive places and we want to avoid the extra lookups. The `element` is
-                // guaranteed to always be in the `_scrollableElements` so this should always match.
-                if (element === _this.element) {
-                    _this._clientRect = clientRect;
-                }
-                _this._parentPositions.set(element, {
-                    scrollPosition: { top: element.scrollTop, left: element.scrollLeft },
-                    clientRect: clientRect
-                });
-            });
+            var element = coercion.coerceElement(this.element);
+            this._parentPositions.cache(this._scrollableElements);
+            // The list element is always in the `scrollableElements`
+            // so we can take advantage of the cached `ClientRect`.
+            this._clientRect = this._parentPositions.positions.get(element).clientRect;
         };
         /** Refreshes the position cache of the items and sibling containers. */
         DropListRef.prototype._cacheItemPositions = function () {
@@ -1787,7 +1955,12 @@
             var styles = coercion.coerceElement(this.element).style;
             styles.scrollSnapType = styles.msScrollSnapType = this._initialScrollSnap;
             // TODO(crisbeto): may have to wait for the animations to finish.
-            this._activeDraggables.forEach(function (item) { return item.getRootElement().style.transform = ''; });
+            this._activeDraggables.forEach(function (item) {
+                var rootElement = item.getRootElement();
+                if (rootElement) {
+                    rootElement.style.transform = '';
+                }
+            });
             this._siblings.forEach(function (sibling) { return sibling._stopReceiving(_this); });
             this._activeDraggables = [];
             this._itemPositions = [];
@@ -1841,6 +2014,29 @@
             }
             return itemOffset;
         };
+        /**
+         * Checks if pointer is entering in the first position
+         * @param pointerX Position of the user's pointer along the X axis.
+         * @param pointerY Position of the user's pointer along the Y axis.
+         */
+        DropListRef.prototype._shouldEnterAsFirstChild = function (pointerX, pointerY) {
+            if (!this._activeDraggables.length) {
+                return false;
+            }
+            var itemPositions = this._itemPositions;
+            var isHorizontal = this._orientation === 'horizontal';
+            // `itemPositions` are sorted by position while `activeDraggables` are sorted by child index
+            // check if container is using some sort of "reverse" ordering (eg: flex-direction: row-reverse)
+            var reversed = itemPositions[0].drag !== this._activeDraggables[0];
+            if (reversed) {
+                var lastItemRect = itemPositions[itemPositions.length - 1].clientRect;
+                return isHorizontal ? pointerX >= lastItemRect.right : pointerY >= lastItemRect.bottom;
+            }
+            else {
+                var firstItemRect = itemPositions[0].clientRect;
+                return isHorizontal ? pointerX <= firstItemRect.left : pointerY <= firstItemRect.top;
+            }
+        };
         /**
          * Gets the index of an item in the drop container, based on the position of the user's pointer.
          * @param item Item that is being sorted.
@@ -1869,8 +2065,8 @@
                 return isHorizontal ?
                     // Round these down since most browsers report client rects with
                     // sub-pixel precision, whereas the pointer coordinates are rounded to pixels.
-                    pointerX >= Math.floor(clientRect.left) && pointerX <= Math.floor(clientRect.right) :
-                    pointerY >= Math.floor(clientRect.top) && pointerY <= Math.floor(clientRect.bottom);
+                    pointerX >= Math.floor(clientRect.left) && pointerX < Math.floor(clientRect.right) :
+                    pointerY >= Math.floor(clientRect.top) && pointerY < Math.floor(clientRect.bottom);
             });
         };
         /** Caches the current items in the list and their positions. */
@@ -1879,48 +2075,6 @@
             this._cacheItemPositions();
             this._cacheParentPositions();
         };
-        /**
-         * Updates the internal state of the container after a scroll event has happened.
-         * @param scrolledParent Element that was scrolled.
-         * @param newTop New top scroll position.
-         * @param newLeft New left scroll position.
-         */
-        DropListRef.prototype._updateAfterScroll = function (scrolledParent, newTop, newLeft) {
-            var _this = this;
-            // Used when figuring out whether an element is inside the scroll parent. If the scrolled
-            // parent is the `document`, we use the `documentElement`, because IE doesn't support `contains`
-            // on the `document`.
-            var scrolledParentNode = scrolledParent === this._document ? scrolledParent.documentElement : scrolledParent;
-            var scrollPosition = this._parentPositions.get(scrolledParent).scrollPosition;
-            var topDifference = scrollPosition.top - newTop;
-            var leftDifference = scrollPosition.left - newLeft;
-            // Go through and update the cached positions of the scroll
-            // parents that are inside the element that was scrolled.
-            this._parentPositions.forEach(function (position, node) {
-                if (position.clientRect && scrolledParent !== node && scrolledParentNode.contains(node)) {
-                    adjustClientRect(position.clientRect, topDifference, leftDifference);
-                }
-            });
-            // Since we know the amount that the user has scrolled we can shift all of the client rectangles
-            // ourselves. This is cheaper than re-measuring everything and we can avoid inconsistent
-            // behavior where we might be measuring the element before its position has changed.
-            this._itemPositions.forEach(function (_a) {
-                var clientRect = _a.clientRect;
-                adjustClientRect(clientRect, topDifference, leftDifference);
-            });
-            // We need two loops for this, because we want all of the cached
-            // positions to be up-to-date before we re-sort the item.
-            this._itemPositions.forEach(function (_a) {
-                var drag = _a.drag;
-                if (_this._dragDropRegistry.isDragging(drag)) {
-                    // We need to re-sort the item manually, because the pointer move
-                    // events won't be dispatched while the user is scrolling.
-                    drag._sortFromLastPointerPosition();
-                }
-            });
-            scrollPosition.top = newTop;
-            scrollPosition.left = newLeft;
-        };
         /**
          * Checks whether the user's pointer is positioned over the container.
          * @param x Pointer position along the X axis.
@@ -1992,21 +2146,26 @@
             var _this = this;
             this._viewportScrollSubscription = this._dragDropRegistry.scroll.subscribe(function (event) {
                 if (_this.isDragging()) {
-                    var target = event.target;
-                    var position = _this._parentPositions.get(target);
-                    if (position) {
-                        var newTop = void 0;
-                        var newLeft = void 0;
-                        if (target === _this._document) {
-                            var scrollPosition = _this._viewportRuler.getViewportScrollPosition();
-                            newTop = scrollPosition.top;
-                            newLeft = scrollPosition.left;
-                        }
-                        else {
-                            newTop = target.scrollTop;
-                            newLeft = target.scrollLeft;
-                        }
-                        _this._updateAfterScroll(target, newTop, newLeft);
+                    var scrollDifference_1 = _this._parentPositions.handleScroll(event);
+                    if (scrollDifference_1) {
+                        // Since we know the amount that the user has scrolled we can shift all of the
+                        // client rectangles ourselves. This is cheaper than re-measuring everything and
+                        // we can avoid inconsistent behavior where we might be measuring the element before
+                        // its position has changed.
+                        _this._itemPositions.forEach(function (_a) {
+                            var clientRect = _a.clientRect;
+                            adjustClientRect(clientRect, scrollDifference_1.top, scrollDifference_1.left);
+                        });
+                        // We need two loops for this, because we want all of the cached
+                        // positions to be up-to-date before we re-sort the item.
+                        _this._itemPositions.forEach(function (_a) {
+                            var drag = _a.drag;
+                            if (_this._dragDropRegistry.isDragging(drag)) {
+                                // We need to re-sort the item manually, because the pointer move
+                                // events won't be dispatched while the user is scrolling.
+                                drag._sortFromLastPointerPosition();
+                            }
+                        });
                     }
                 }
                 else if (_this.isReceiving()) {
@@ -2029,31 +2188,6 @@
         };
         return DropListRef;
     }());
-    /**
-     * Updates the top/left positions of a `ClientRect`, as well as their bottom/right counterparts.
-     * @param clientRect `ClientRect` that should be updated.
-     * @param top Amount to add to the `top` position.
-     * @param left Amount to add to the `left` position.
-     */
-    function adjustClientRect(clientRect, top, left) {
-        clientRect.top += top;
-        clientRect.bottom = clientRect.top + clientRect.height;
-        clientRect.left += left;
-        clientRect.right = clientRect.left + clientRect.width;
-    }
-    /**
-     * Checks whether the pointer coordinates are close to a ClientRect.
-     * @param rect ClientRect to check against.
-     * @param pointerX Coordinates along the X axis.
-     * @param pointerY Coordinates along the Y axis.
-     */
-    function isPointerNearClientRect(rect, pointerX, pointerY) {
-        var top = rect.top, right = rect.right, bottom = rect.bottom, left = rect.left, width = rect.width, height = rect.height;
-        var xThreshold = width * DROP_PROXIMITY_THRESHOLD;
-        var yThreshold = height * DROP_PROXIMITY_THRESHOLD;
-        return pointerY > top - yThreshold && pointerY < bottom + yThreshold &&
-            pointerX > left - xThreshold && pointerX < right + xThreshold;
-    }
     /**
      * Finds the index of an item that matches a predicate function. Used as an equivalent
      * of `Array.prototype.findIndex` which isn't part of the standard Google typings.
@@ -2068,32 +2202,6 @@
         }
         return -1;
     }
-    /**
-     * Checks whether some coordinates are within a `ClientRect`.
-     * @param clientRect ClientRect that is being checked.
-     * @param x Coordinates along the X axis.
-     * @param y Coordinates along the Y axis.
-     */
-    function isInsideClientRect(clientRect, x, y) {
-        var top = clientRect.top, bottom = clientRect.bottom, left = clientRect.left, right = clientRect.right;
-        return y >= top && y <= bottom && x >= left && x <= right;
-    }
-    /** Gets a mutable version of an element's bounding `ClientRect`. */
-    function getMutableClientRect(element) {
-        var clientRect = element.getBoundingClientRect();
-        // We need to clone the `clientRect` here, because all the values on it are readonly
-        // and we need to be able to update them. Also we can't use a spread here, because
-        // the values on a `ClientRect` aren't own properties. See:
-        // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes
-        return {
-            top: clientRect.top,
-            right: clientRect.right,
-            bottom: clientRect.bottom,
-            left: clientRect.left,
-            width: clientRect.width,
-            height: clientRect.height
-        };
-    }
     /**
      * Increments the vertical scroll position of a node.
      * @param node Node whose scroll position should change.
@@ -2638,7 +2746,8 @@
                 dragStartThreshold: config && config.dragStartThreshold != null ?
                     config.dragStartThreshold : 5,
                 pointerDirectionChangeThreshold: config && config.pointerDirectionChangeThreshold != null ?
-                    config.pointerDirectionChangeThreshold : 5
+                    config.pointerDirectionChangeThreshold : 5,
+                zIndex: config === null || config === void 0 ? void 0 : config.zIndex
             });
             this._dragRef.data = this;
             if (config) {
@@ -3070,15 +3179,6 @@
             enumerable: true,
             configurable: true
         });
-        CdkDropList.prototype.ngAfterContentInit = function () {
-            // @breaking-change 11.0.0 Remove null check for _scrollDispatcher once it's required.
-            if (this._scrollDispatcher) {
-                var scrollableParents = this._scrollDispatcher
-                    .getAncestorScrollContainers(this.element)
-                    .map(function (scrollable) { return scrollable.getElementRef().nativeElement; });
-                this._dropListRef.withScrollableParents(scrollableParents);
-            }
-        };
         /** Registers an items with the drop list. */
         CdkDropList.prototype.addItem = function (item) {
             this._unsortedItems.add(item);
@@ -3187,6 +3287,18 @@
                         }
                     });
                 }
+                // Note that we resolve the scrollable parents here so that we delay the resolution
+                // as long as possible, ensuring that the element is in its final place in the DOM.
+                // @breaking-change 11.0.0 Remove null check for _scrollDispatcher once it's required.
+                if (!_this._scrollableParentsResolved && _this._scrollDispatcher) {
+                    var scrollableParents = _this._scrollDispatcher
+                        .getAncestorScrollContainers(_this.element)
+                        .map(function (scrollable) { return scrollable.getElementRef().nativeElement; });
+                    _this._dropListRef.withScrollableParents(scrollableParents);
+                    // Only do this once since it involves traversing the DOM and the parents
+                    // shouldn't be able to change without the drop list being destroyed.
+                    _this._scrollableParentsResolved = true;
+                }
                 ref.disabled = _this.disabled;
                 ref.lockAxis = _this.lockAxis;
                 ref.sortingDisabled = coercion.coerceBooleanProperty(_this.sortingDisabled);
@@ -3324,6 +3436,7 @@
                             CdkDragPlaceholder,
                         ],
                         exports: [
+                            i2.CdkScrollableModule,
                             CdkDropList,
                             CdkDropListGroup,
                             CdkDrag,