@angular/cdk 10.0.2 → 10.1.3

package/fesm2015/drag-drop.js

@@ -1,10 +1,10 @@
-import { ɵɵdefineInjectable, ɵɵinject, NgZone, Injectable, Inject, InjectionToken, Directive, ElementRef, Optional, Input, TemplateRef, EventEmitter, isDevMode, SkipSelf, ViewContainerRef, ChangeDetectorRef, ContentChildren, ContentChild, Output, NgModule } from '@angular/core';
+import { ɵɵdefineInjectable, ɵɵinject, NgZone, Injectable, Inject, InjectionToken, Directive, Input, EventEmitter, isDevMode, ElementRef, ChangeDetectorRef, Optional, SkipSelf, Output, TemplateRef, ViewContainerRef, Self, ContentChildren, ContentChild, NgModule } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { ViewportRuler, ScrollDispatcher, CdkScrollableModule } from '@angular/cdk/scrolling';
 import { normalizePassiveListenerOptions, _getShadowRoot } from '@angular/cdk/platform';
-import { coerceBooleanProperty, coerceElement, coerceNumberProperty, coerceArray } from '@angular/cdk/coercion';
+import { coerceBooleanProperty, coerceElement, coerceArray, coerceNumberProperty } from '@angular/cdk/coercion';
 import { Subject, Subscription, interval, animationFrameScheduler, Observable, merge } from 'rxjs';
-import { takeUntil, map, take, startWith, tap, switchMap } from 'rxjs/operators';
+import { takeUntil, startWith, map, take, tap, switchMap } from 'rxjs/operators';
 import { Directionality } from '@angular/cdk/bidi';
 
 /**
@@ -211,6 +211,60 @@ class ParentPositionTracker {
     }
 }
 
+/**
+ * @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
+ */
+/** Creates a deep clone of an element. */
+function deepCloneNode(node) {
+    const clone = node.cloneNode(true);
+    const descendantsWithId = clone.querySelectorAll('[id]');
+    const nodeName = node.nodeName.toLowerCase();
+    // Remove the `id` to avoid having multiple elements with the same id on the page.
+    clone.removeAttribute('id');
+    for (let i = 0; i < descendantsWithId.length; i++) {
+        descendantsWithId[i].removeAttribute('id');
+    }
+    if (nodeName === 'canvas') {
+        transferCanvasData(node, clone);
+    }
+    else if (nodeName === 'input' || nodeName === 'select' || nodeName === 'textarea') {
+        transferInputData(node, clone);
+    }
+    transferData('canvas', node, clone, transferCanvasData);
+    transferData('input, textarea, select', node, clone, transferInputData);
+    return clone;
+}
+/** Matches elements between an element and its clone and allows for their data to be cloned. */
+function transferData(selector, node, clone, callback) {
+    const descendantElements = node.querySelectorAll(selector);
+    if (descendantElements.length) {
+        const cloneElements = clone.querySelectorAll(selector);
+        for (let i = 0; i < descendantElements.length; i++) {
+            callback(descendantElements[i], cloneElements[i]);
+        }
+    }
+}
+/** Transfers the data of one input element to another. */
+function transferInputData(source, clone) {
+    clone.value = source.value;
+}
+/** Transfers the data of one canvas element to another. */
+function transferCanvasData(source, clone) {
+    const context = clone.getContext('2d');
+    if (context) {
+        // In some cases `drawImage` can throw (e.g. if the canvas size is 0x0).
+        // We can't do much about it so just ignore the error.
+        try {
+            context.drawImage(source, 0, 0);
+        }
+        catch (_a) { }
+    }
+}
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -1163,34 +1217,6 @@ function getTransform(x, y) {
     // blur the elements for sub-pixel transforms.
     return `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
 }
-/** Creates a deep clone of an element. */
-function deepCloneNode(node) {
-    const clone = node.cloneNode(true);
-    const descendantsWithId = clone.querySelectorAll('[id]');
-    const descendantCanvases = node.querySelectorAll('canvas');
-    // Remove the `id` to avoid having multiple elements with the same id on the page.
-    clone.removeAttribute('id');
-    for (let i = 0; i < descendantsWithId.length; i++) {
-        descendantsWithId[i].removeAttribute('id');
-    }
-    // `cloneNode` won't transfer the content of `canvas` elements so we have to do it ourselves.
-    // We match up the cloned canvas to their sources using their index in the DOM.
-    if (descendantCanvases.length) {
-        const cloneCanvases = clone.querySelectorAll('canvas');
-        for (let i = 0; i < descendantCanvases.length; i++) {
-            const correspondingCloneContext = cloneCanvases[i].getContext('2d');
-            if (correspondingCloneContext) {
-                // In some cases `drawImage` can throw (e.g. if the canvas size is 0x0).
-                // We can't do much about it so just ignore the error.
-                try {
-                    correspondingCloneContext.drawImage(descendantCanvases[i], 0, 0);
-                }
-                catch (_a) { }
-            }
-        }
-    }
-    return clone;
-}
 /** Clamps a value between a minimum and a maximum. */
 function clamp(value, min, max) {
     return Math.max(min, Math.min(max, value));
@@ -2361,115 +2387,41 @@ DragDrop.ctorParameters = () => [
  * found in the LICENSE file at https://angular.io/license
  */
 /**
- * Injection token that can be used for a `CdkDrag` to provide itself as a parent to the
- * drag-specific child directive (`CdkDragHandle`, `CdkDragPreview` etc.). Used primarily
- * to avoid circular imports.
- * @docs-private
+ * Injection token that can be used to reference instances of `CdkDropListGroup`. It serves as
+ * alternative token to the actual `CdkDropListGroup` class which could cause unnecessary
+ * retention of the class and its directive metadata.
  */
-const CDK_DRAG_PARENT = new InjectionToken('CDK_DRAG_PARENT');
-
+const CDK_DROP_LIST_GROUP = new InjectionToken('CdkDropListGroup');
 /**
- * @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
+ * Declaratively connects sibling `cdkDropList` instances together. All of the `cdkDropList`
+ * elements that are placed inside a `cdkDropListGroup` will be connected to each other
+ * automatically. Can be used as an alternative to the `cdkDropListConnectedTo` input
+ * from `cdkDropList`.
  */
-/** Handle that can be used to drag and CdkDrag instance. */
-class CdkDragHandle {
-    constructor(element, parentDrag) {
-        this.element = element;
-        /** Emits when the state of the handle has changed. */
-        this._stateChanges = new Subject();
+class CdkDropListGroup {
+    constructor() {
+        /** Drop lists registered inside the group. */
+        this._items = new Set();
         this._disabled = false;
-        this._parentDrag = parentDrag;
-        toggleNativeDragInteractions(element.nativeElement, false);
     }
-    /** Whether starting to drag through this handle is disabled. */
+    /** Whether starting a dragging sequence from inside this group is disabled. */
     get disabled() { return this._disabled; }
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
-        this._stateChanges.next(this);
     }
     ngOnDestroy() {
-        this._stateChanges.complete();
-    }
-}
-CdkDragHandle.decorators = [
-    { type: Directive, args: [{
-                selector: '[cdkDragHandle]',
-                host: {
-                    'class': 'cdk-drag-handle'
-                }
-            },] }
-];
-CdkDragHandle.ctorParameters = () => [
-    { type: ElementRef },
-    { type: undefined, decorators: [{ type: Inject, args: [CDK_DRAG_PARENT,] }, { type: Optional }] }
-];
-CdkDragHandle.propDecorators = {
-    disabled: [{ type: Input, args: ['cdkDragHandleDisabled',] }]
-};
-
-/**
- * @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
- */
-/**
- * Element that will be used as a template for the placeholder of a CdkDrag when
- * it is being dragged. The placeholder is displayed in place of the element being dragged.
- */
-class CdkDragPlaceholder {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-CdkDragPlaceholder.decorators = [
-    { type: Directive, args: [{
-                selector: 'ng-template[cdkDragPlaceholder]'
-            },] }
-];
-CdkDragPlaceholder.ctorParameters = () => [
-    { type: TemplateRef }
-];
-CdkDragPlaceholder.propDecorators = {
-    data: [{ type: Input }]
-};
-
-/**
- * @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
- */
-/**
- * Element that will be used as a template for the preview
- * of a CdkDrag when it is being dragged.
- */
-class CdkDragPreview {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-        this._matchSize = false;
+        this._items.clear();
     }
-    /** Whether the preview should preserve the same size as the item that is being dragged. */
-    get matchSize() { return this._matchSize; }
-    set matchSize(value) { this._matchSize = coerceBooleanProperty(value); }
 }
-CdkDragPreview.decorators = [
+CdkDropListGroup.decorators = [
     { type: Directive, args: [{
-                selector: 'ng-template[cdkDragPreview]'
+                selector: '[cdkDropListGroup]',
+                exportAs: 'cdkDropListGroup',
+                providers: [{ provide: CDK_DROP_LIST_GROUP, useExisting: CdkDropListGroup }],
             },] }
 ];
-CdkDragPreview.ctorParameters = () => [
-    { type: TemplateRef }
-];
-CdkDragPreview.propDecorators = {
-    data: [{ type: Input }],
-    matchSize: [{ type: Input }]
+CdkDropListGroup.propDecorators = {
+    disabled: [{ type: Input, args: ['cdkDropListGroupDisabled',] }]
 };
 
 /**
@@ -2492,250 +2444,204 @@ const CDK_DRAG_CONFIG = new InjectionToken('CDK_DRAG_CONFIG');
  * 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
  */
+/** Counter used to generate unique ids for drop zones. */
+let _uniqueIdCounter = 0;
 /**
- * Injection token that is used to provide a CdkDropList instance to CdkDrag.
- * Used for avoiding circular imports.
+ * Injection token that can be used to reference instances of `CdkDropList`. It serves as
+ * alternative token to the actual `CdkDropList` class which could cause unnecessary
+ * retention of the class and its directive metadata.
  */
-const CDK_DROP_LIST = new InjectionToken('CDK_DROP_LIST');
-/** Element that can be moved inside a CdkDropList container. */
-class CdkDrag {
+const CDK_DROP_LIST = new InjectionToken('CdkDropList');
+const ɵ0 = undefined;
+/** Container that wraps a set of draggable items. */
+class CdkDropList {
     constructor(
-    /** Element that the draggable is attached to. */
-    element, 
-    /** Droppable container that the draggable is a part of. */
-    dropContainer, _document, _ngZone, _viewContainerRef, config, _dir, dragDrop, _changeDetectorRef) {
+    /** Element that the drop list is attached to. */
+    element, dragDrop, _changeDetectorRef, _dir, _group, 
+    /**
+     * @deprecated _scrollDispatcher parameter to become required.
+     * @breaking-change 11.0.0
+     */
+    _scrollDispatcher, config) {
         this.element = element;
-        this.dropContainer = dropContainer;
-        this._document = _document;
-        this._ngZone = _ngZone;
-        this._viewContainerRef = _viewContainerRef;
-        this._dir = _dir;
         this._changeDetectorRef = _changeDetectorRef;
+        this._dir = _dir;
+        this._group = _group;
+        this._scrollDispatcher = _scrollDispatcher;
+        /** Emits when the list has been destroyed. */
         this._destroyed = new Subject();
-        /** Emits when the user starts dragging the item. */
-        this.started = new EventEmitter();
-        /** Emits when the user has released a drag item, before any animations have started. */
-        this.released = new EventEmitter();
-        /** Emits when the user stops dragging an item in the container. */
-        this.ended = new EventEmitter();
-        /** Emits when the user has moved the item into a new container. */
+        /**
+         * Other draggable containers that this container is connected to and into which the
+         * container's items can be transferred. Can either be references to other drop containers,
+         * or their unique IDs.
+         */
+        this.connectedTo = [];
+        /**
+         * Unique ID for the drop zone. Can be used as a reference
+         * in the `connectedTo` of another `CdkDropList`.
+         */
+        this.id = `cdk-drop-list-${_uniqueIdCounter++}`;
+        /**
+         * Function that is used to determine whether an item
+         * is allowed to be moved into a drop container.
+         */
+        this.enterPredicate = () => true;
+        /** Emits when the user drops an item inside the container. */
+        this.dropped = new EventEmitter();
+        /**
+         * Emits when the user has moved a new drag item into this container.
+         */
         this.entered = new EventEmitter();
-        /** Emits when the user removes the item its container by dragging it into another container. */
+        /**
+         * Emits when the user removes an item from the container
+         * by dragging it into another container.
+         */
         this.exited = new EventEmitter();
-        /** Emits when the user drops the item inside a container. */
-        this.dropped = new EventEmitter();
+        /** Emits as the user is swapping items while actively dragging. */
+        this.sorted = new EventEmitter();
         /**
-         * Emits as the user is dragging the item. Use with caution,
-         * because this event will fire for every pixel that the user has dragged.
+         * Keeps track of the items that are registered with this container. Historically we used to
+         * do this with a `ContentChildren` query, however queries don't handle transplanted views very
+         * well which means that we can't handle cases like dragging the headers of a `mat-table`
+         * correctly. What we do instead is to have the items register themselves with the container
+         * and then we sort them based on their position in the DOM.
          */
-        this.moved = new Observable((observer) => {
-            const subscription = this._dragRef.moved.pipe(map(movedEvent => ({
-                source: this,
-                pointerPosition: movedEvent.pointerPosition,
-                event: movedEvent.event,
-                delta: movedEvent.delta,
-                distance: movedEvent.distance
-            }))).subscribe(observer);
-            return () => {
-                subscription.unsubscribe();
-            };
-        });
-        this._dragRef = dragDrop.createDrag(element, {
-            dragStartThreshold: config && config.dragStartThreshold != null ?
-                config.dragStartThreshold : 5,
-            pointerDirectionChangeThreshold: config && config.pointerDirectionChangeThreshold != null ?
-                config.pointerDirectionChangeThreshold : 5,
-            zIndex: config === null || config === void 0 ? void 0 : config.zIndex
-        });
-        this._dragRef.data = this;
+        this._unsortedItems = new Set();
+        this._dropListRef = dragDrop.createDropList(element);
+        this._dropListRef.data = this;
         if (config) {
             this._assignDefaults(config);
         }
-        // Note that usually the container is assigned when the drop list is picks up the item, but in
-        // some cases (mainly transplanted views with OnPush, see #18341) we may end up in a situation
-        // where there are no items on the first change detection pass, but the items get picked up as
-        // soon as the user triggers another pass by dragging. This is a problem, because the item would
-        // have to switch from standalone mode to drag mode in the middle of the dragging sequence which
-        // is too late since the two modes save different kinds of information. We work around it by
-        // assigning the drop container both from here and the list.
-        if (dropContainer) {
-            this._dragRef._withDropContainer(dropContainer._dropListRef);
-            dropContainer.addItem(this);
-        }
-        this._syncInputs(this._dragRef);
-        this._handleEvents(this._dragRef);
-    }
-    /** Whether starting to drag this element is disabled. */
+        this._dropListRef.enterPredicate = (drag, drop) => {
+            return this.enterPredicate(drag.data, drop.data);
+        };
+        this._setupInputSyncSubscription(this._dropListRef);
+        this._handleEvents(this._dropListRef);
+        CdkDropList._dropLists.push(this);
+        if (_group) {
+            _group._items.add(this);
+        }
+    }
+    /** Whether starting a dragging sequence from this container is disabled. */
     get disabled() {
-        return this._disabled || (this.dropContainer && this.dropContainer.disabled);
+        return this._disabled || (!!this._group && this._group.disabled);
     }
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        this._dragRef.disabled = this._disabled;
-    }
-    /**
-     * Returns the element that is being used as a placeholder
-     * while the current element is being dragged.
-     */
-    getPlaceholderElement() {
-        return this._dragRef.getPlaceholderElement();
-    }
-    /** Returns the root draggable element. */
-    getRootElement() {
-        return this._dragRef.getRootElement();
+        // Usually we sync the directive and ref state right before dragging starts, in order to have
+        // a single point of failure and to avoid having to use setters for everything. `disabled` is
+        // a special case, because it can prevent the `beforeStarted` event from firing, which can lock
+        // the user in a disabled state, so we also need to sync it as it's being set.
+        this._dropListRef.disabled = this._disabled = coerceBooleanProperty(value);
     }
-    /** Resets a standalone drag item to its initial position. */
-    reset() {
-        this._dragRef.reset();
+    /** Registers an items with the drop list. */
+    addItem(item) {
+        this._unsortedItems.add(item);
+        if (this._dropListRef.isDragging()) {
+            this._syncItemsWithRef();
+        }
     }
-    /**
-     * Gets the pixel coordinates of the draggable outside of a drop container.
-     */
-    getFreeDragPosition() {
-        return this._dragRef.getFreeDragPosition();
+    /** Removes an item from the drop list. */
+    removeItem(item) {
+        this._unsortedItems.delete(item);
+        if (this._dropListRef.isDragging()) {
+            this._syncItemsWithRef();
+        }
     }
-    ngAfterViewInit() {
-        // We need to wait for the zone to stabilize, in order for the reference
-        // element to be in the proper place in the DOM. This is mostly relevant
-        // for draggable elements inside portals since they get stamped out in
-        // their original DOM position and then they get transferred to the portal.
-        this._ngZone.onStable.asObservable()
-            .pipe(take(1), takeUntil(this._destroyed))
-            .subscribe(() => {
-            this._updateRootElement();
-            // Listen for any newly-added handles.
-            this._handles.changes.pipe(startWith(this._handles), 
-            // Sync the new handles with the DragRef.
-            tap((handles) => {
-                const childHandleElements = handles
-                    .filter(handle => handle._parentDrag === this)
-                    .map(handle => handle.element);
-                this._dragRef.withHandles(childHandleElements);
-            }), 
-            // Listen if the state of any of the handles changes.
-            switchMap((handles) => {
-                return merge(...handles.map(item => {
-                    return item._stateChanges.pipe(startWith(item));
-                }));
-            }), takeUntil(this._destroyed)).subscribe(handleInstance => {
-                // Enabled/disable the handle that changed in the DragRef.
-                const dragRef = this._dragRef;
-                const handle = handleInstance.element.nativeElement;
-                handleInstance.disabled ? dragRef.disableHandle(handle) : dragRef.enableHandle(handle);
-            });
-            if (this.freeDragPosition) {
-                this._dragRef.setFreeDragPosition(this.freeDragPosition);
-            }
+    /** Gets the registered items in the list, sorted by their position in the DOM. */
+    getSortedItems() {
+        return Array.from(this._unsortedItems).sort((a, b) => {
+            const documentPosition = a._dragRef.getVisibleElement().compareDocumentPosition(b._dragRef.getVisibleElement());
+            // `compareDocumentPosition` returns a bitmask so we have to use a bitwise operator.
+            // https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
+            // tslint:disable-next-line:no-bitwise
+            return documentPosition & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
         });
     }
-    ngOnChanges(changes) {
-        const rootSelectorChange = changes['rootElementSelector'];
-        const positionChange = changes['freeDragPosition'];
-        // We don't have to react to the first change since it's being
-        // handled in `ngAfterViewInit` where it needs to be deferred.
-        if (rootSelectorChange && !rootSelectorChange.firstChange) {
-            this._updateRootElement();
-        }
-        // Skip the first change since it's being handled in `ngAfterViewInit`.
-        if (positionChange && !positionChange.firstChange && this.freeDragPosition) {
-            this._dragRef.setFreeDragPosition(this.freeDragPosition);
-        }
-    }
     ngOnDestroy() {
-        if (this.dropContainer) {
-            this.dropContainer.removeItem(this);
+        const index = CdkDropList._dropLists.indexOf(this);
+        if (index > -1) {
+            CdkDropList._dropLists.splice(index, 1);
+        }
+        if (this._group) {
+            this._group._items.delete(this);
         }
+        this._unsortedItems.clear();
+        this._dropListRef.dispose();
         this._destroyed.next();
         this._destroyed.complete();
-        this._dragRef.dispose();
-    }
-    /** Syncs the root element with the `DragRef`. */
-    _updateRootElement() {
-        const element = this.element.nativeElement;
-        const rootElement = this.rootElementSelector ?
-            getClosestMatchingAncestor(element, this.rootElementSelector) : element;
-        if (rootElement && rootElement.nodeType !== this._document.ELEMENT_NODE) {
-            throw Error(`cdkDrag must be attached to an element node. ` +
-                `Currently attached to "${rootElement.nodeName}".`);
-        }
-        this._dragRef.withRootElement(rootElement || element);
     }
-    /** Gets the boundary element, based on the `boundaryElement` value. */
-    _getBoundaryElement() {
-        const boundary = this.boundaryElement;
-        if (!boundary) {
-            return null;
-        }
-        if (typeof boundary === 'string') {
-            return getClosestMatchingAncestor(this.element.nativeElement, boundary);
-        }
-        const element = coerceElement(boundary);
-        if (isDevMode() && !element.contains(this.element.nativeElement)) {
-            throw Error('Draggable element is not inside of the node passed into cdkDragBoundary.');
+    /** Syncs the inputs of the CdkDropList with the options of the underlying DropListRef. */
+    _setupInputSyncSubscription(ref) {
+        if (this._dir) {
+            this._dir.change
+                .pipe(startWith(this._dir.value), takeUntil(this._destroyed))
+                .subscribe(value => ref.withDirection(value));
         }
-        return element;
-    }
-    /** Syncs the inputs of the CdkDrag with the options of the underlying DragRef. */
-    _syncInputs(ref) {
         ref.beforeStarted.subscribe(() => {
-            if (!ref.isDragging()) {
-                const dir = this._dir;
-                const dragStartDelay = this.dragStartDelay;
-                const placeholder = this._placeholderTemplate ? {
-                    template: this._placeholderTemplate.templateRef,
-                    context: this._placeholderTemplate.data,
-                    viewContainer: this._viewContainerRef
-                } : null;
-                const preview = this._previewTemplate ? {
-                    template: this._previewTemplate.templateRef,
-                    context: this._previewTemplate.data,
-                    matchSize: this._previewTemplate.matchSize,
-                    viewContainer: this._viewContainerRef
-                } : null;
-                ref.disabled = this.disabled;
-                ref.lockAxis = this.lockAxis;
-                ref.dragStartDelay = (typeof dragStartDelay === 'object' && dragStartDelay) ?
-                    dragStartDelay : coerceNumberProperty(dragStartDelay);
-                ref.constrainPosition = this.constrainPosition;
-                ref.previewClass = this.previewClass;
-                ref
-                    .withBoundaryElement(this._getBoundaryElement())
-                    .withPlaceholderTemplate(placeholder)
-                    .withPreviewTemplate(preview);
-                if (dir) {
-                    ref.withDirection(dir.value);
+            const siblings = coerceArray(this.connectedTo).map(drop => {
+                if (typeof drop === 'string') {
+                    const correspondingDropList = CdkDropList._dropLists.find(list => list.id === drop);
+                    if (!correspondingDropList && isDevMode()) {
+                        console.warn(`CdkDropList could not find connected drop list with id "${drop}"`);
+                    }
+                    return correspondingDropList;
                 }
+                return drop;
+            });
+            if (this._group) {
+                this._group._items.forEach(drop => {
+                    if (siblings.indexOf(drop) === -1) {
+                        siblings.push(drop);
+                    }
+                });
+            }
+            // 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) {
+                const scrollableParents = this._scrollDispatcher
+                    .getAncestorScrollContainers(this.element)
+                    .map(scrollable => 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 = coerceBooleanProperty(this.sortingDisabled);
+            ref.autoScrollDisabled = coerceBooleanProperty(this.autoScrollDisabled);
+            ref
+                .connectedTo(siblings.filter(drop => drop && drop !== this).map(list => list._dropListRef))
+                .withOrientation(this.orientation);
         });
     }
-    /** Handles the events from the underlying `DragRef`. */
+    /** Handles events from the underlying DropListRef. */
     _handleEvents(ref) {
-        ref.started.subscribe(() => {
-            this.started.emit({ source: this });
-            // Since all of these events run outside of change detection,
-            // we need to ensure that everything is marked correctly.
-            this._changeDetectorRef.markForCheck();
-        });
-        ref.released.subscribe(() => {
-            this.released.emit({ source: this });
-        });
-        ref.ended.subscribe(event => {
-            this.ended.emit({ source: this, distance: event.distance });
-            // Since all of these events run outside of change detection,
-            // we need to ensure that everything is marked correctly.
+        ref.beforeStarted.subscribe(() => {
+            this._syncItemsWithRef();
             this._changeDetectorRef.markForCheck();
         });
         ref.entered.subscribe(event => {
             this.entered.emit({
-                container: event.container.data,
-                item: this,
+                container: this,
+                item: event.item.data,
                 currentIndex: event.currentIndex
             });
         });
         ref.exited.subscribe(event => {
             this.exited.emit({
-                container: event.container.data,
-                item: this
+                container: this,
+                item: event.item.data
+            });
+            this._changeDetectorRef.markForCheck();
+        });
+        ref.sorted.subscribe(event => {
+            this.sorted.emit({
+                previousIndex: event.previousIndex,
+                currentIndex: event.currentIndex,
+                container: this,
+                item: event.item.data
             });
         });
         ref.dropped.subscribe(event => {
@@ -2744,91 +2650,75 @@ class CdkDrag {
                 currentIndex: event.currentIndex,
                 previousContainer: event.previousContainer.data,
                 container: event.container.data,
+                item: event.item.data,
                 isPointerOverContainer: event.isPointerOverContainer,
-                item: this,
                 distance: event.distance
             });
+            // Mark for check since all of these events run outside of change
+            // detection and we're not guaranteed for something else to have triggered it.
+            this._changeDetectorRef.markForCheck();
         });
     }
     /** Assigns the default input values based on a provided config object. */
     _assignDefaults(config) {
-        const { lockAxis, dragStartDelay, constrainPosition, previewClass, boundaryElement, draggingDisabled, rootElementSelector } = config;
+        const { lockAxis, draggingDisabled, sortingDisabled, listAutoScrollDisabled, listOrientation } = config;
         this.disabled = draggingDisabled == null ? false : draggingDisabled;
-        this.dragStartDelay = dragStartDelay || 0;
+        this.sortingDisabled = sortingDisabled == null ? false : sortingDisabled;
+        this.autoScrollDisabled = listAutoScrollDisabled == null ? false : listAutoScrollDisabled;
+        this.orientation = listOrientation || 'vertical';
         if (lockAxis) {
             this.lockAxis = lockAxis;
         }
-        if (constrainPosition) {
-            this.constrainPosition = constrainPosition;
-        }
-        if (previewClass) {
-            this.previewClass = previewClass;
-        }
-        if (boundaryElement) {
-            this.boundaryElement = boundaryElement;
-        }
-        if (rootElementSelector) {
-            this.rootElementSelector = rootElementSelector;
-        }
+    }
+    /** Syncs up the registered drag items with underlying drop list ref. */
+    _syncItemsWithRef() {
+        this._dropListRef.withItems(this.getSortedItems().map(item => item._dragRef));
     }
 }
-CdkDrag.decorators = [
+/** Keeps track of the drop lists that are currently on the page. */
+CdkDropList._dropLists = [];
+CdkDropList.decorators = [
     { type: Directive, args: [{
-                selector: '[cdkDrag]',
-                exportAs: 'cdkDrag',
+                selector: '[cdkDropList], cdk-drop-list',
+                exportAs: 'cdkDropList',
+                providers: [
+                    // Prevent child drop lists from picking up the same group as their parent.
+                    { provide: CDK_DROP_LIST_GROUP, useValue: ɵ0 },
+                    { provide: CDK_DROP_LIST, useExisting: CdkDropList },
+                ],
                 host: {
-                    'class': 'cdk-drag',
-                    '[class.cdk-drag-disabled]': 'disabled',
-                    '[class.cdk-drag-dragging]': '_dragRef.isDragging()',
-                },
-                providers: [{ provide: CDK_DRAG_PARENT, useExisting: CdkDrag }]
+                    'class': 'cdk-drop-list',
+                    '[id]': 'id',
+                    '[class.cdk-drop-list-disabled]': 'disabled',
+                    '[class.cdk-drop-list-dragging]': '_dropListRef.isDragging()',
+                    '[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()',
+                }
             },] }
 ];
-CdkDrag.ctorParameters = () => [
+CdkDropList.ctorParameters = () => [
     { type: ElementRef },
-    { type: undefined, decorators: [{ type: Inject, args: [CDK_DROP_LIST,] }, { type: Optional }, { type: SkipSelf }] },
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: NgZone },
-    { type: ViewContainerRef },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [CDK_DRAG_CONFIG,] }] },
-    { type: Directionality, decorators: [{ type: Optional }] },
     { type: DragDrop },
-    { type: ChangeDetectorRef }
+    { type: ChangeDetectorRef },
+    { type: Directionality, decorators: [{ type: Optional }] },
+    { type: CdkDropListGroup, decorators: [{ type: Optional }, { type: Inject, args: [CDK_DROP_LIST_GROUP,] }, { type: SkipSelf }] },
+    { type: ScrollDispatcher },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [CDK_DRAG_CONFIG,] }] }
 ];
-CdkDrag.propDecorators = {
-    _handles: [{ type: ContentChildren, args: [CdkDragHandle, { descendants: true },] }],
-    _previewTemplate: [{ type: ContentChild, args: [CdkDragPreview,] }],
-    _placeholderTemplate: [{ type: ContentChild, args: [CdkDragPlaceholder,] }],
-    data: [{ type: Input, args: ['cdkDragData',] }],
-    lockAxis: [{ type: Input, args: ['cdkDragLockAxis',] }],
-    rootElementSelector: [{ type: Input, args: ['cdkDragRootElement',] }],
-    boundaryElement: [{ type: Input, args: ['cdkDragBoundary',] }],
-    dragStartDelay: [{ type: Input, args: ['cdkDragStartDelay',] }],
-    freeDragPosition: [{ type: Input, args: ['cdkDragFreeDragPosition',] }],
-    disabled: [{ type: Input, args: ['cdkDragDisabled',] }],
-    constrainPosition: [{ type: Input, args: ['cdkDragConstrainPosition',] }],
-    previewClass: [{ type: Input, args: ['cdkDragPreviewClass',] }],
-    started: [{ type: Output, args: ['cdkDragStarted',] }],
-    released: [{ type: Output, args: ['cdkDragReleased',] }],
-    ended: [{ type: Output, args: ['cdkDragEnded',] }],
-    entered: [{ type: Output, args: ['cdkDragEntered',] }],
-    exited: [{ type: Output, args: ['cdkDragExited',] }],
-    dropped: [{ type: Output, args: ['cdkDragDropped',] }],
-    moved: [{ type: Output, args: ['cdkDragMoved',] }]
+CdkDropList.propDecorators = {
+    connectedTo: [{ type: Input, args: ['cdkDropListConnectedTo',] }],
+    data: [{ type: Input, args: ['cdkDropListData',] }],
+    orientation: [{ type: Input, args: ['cdkDropListOrientation',] }],
+    id: [{ type: Input }],
+    lockAxis: [{ type: Input, args: ['cdkDropListLockAxis',] }],
+    disabled: [{ type: Input, args: ['cdkDropListDisabled',] }],
+    sortingDisabled: [{ type: Input, args: ['cdkDropListSortingDisabled',] }],
+    enterPredicate: [{ type: Input, args: ['cdkDropListEnterPredicate',] }],
+    autoScrollDisabled: [{ type: Input, args: ['cdkDropListAutoScrollDisabled',] }],
+    dropped: [{ type: Output, args: ['cdkDropListDropped',] }],
+    entered: [{ type: Output, args: ['cdkDropListEntered',] }],
+    exited: [{ type: Output, args: ['cdkDropListExited',] }],
+    sorted: [{ type: Output, args: ['cdkDropListSorted',] }]
 };
-/** Gets the closest ancestor of an element that matches a selector. */
-function getClosestMatchingAncestor(element, selector) {
-    let currentElement = element.parentElement;
-    while (currentElement) {
-        // IE doesn't support `matches` so we have to fall back to `msMatchesSelector`.
-        if (currentElement.matches ? currentElement.matches(selector) :
-            currentElement.msMatchesSelector(selector)) {
-            return currentElement;
-        }
-        currentElement = currentElement.parentElement;
-    }
-    return null;
-}
 
 /**
  * @license
@@ -2838,34 +2728,61 @@ function getClosestMatchingAncestor(element, selector) {
  * found in the LICENSE file at https://angular.io/license
  */
 /**
- * Declaratively connects sibling `cdkDropList` instances together. All of the `cdkDropList`
- * elements that are placed inside a `cdkDropListGroup` will be connected to each other
- * automatically. Can be used as an alternative to the `cdkDropListConnectedTo` input
- * from `cdkDropList`.
+ * Injection token that can be used for a `CdkDrag` to provide itself as a parent to the
+ * drag-specific child directive (`CdkDragHandle`, `CdkDragPreview` etc.). Used primarily
+ * to avoid circular imports.
+ * @docs-private
  */
-class CdkDropListGroup {
-    constructor() {
-        /** Drop lists registered inside the group. */
-        this._items = new Set();
+const CDK_DRAG_PARENT = new InjectionToken('CDK_DRAG_PARENT');
+
+/**
+ * @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
+ */
+/**
+ * Injection token that can be used to reference instances of `CdkDragHandle`. It serves as
+ * alternative token to the actual `CdkDragHandle` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const CDK_DRAG_HANDLE = new InjectionToken('CdkDragHandle');
+/** Handle that can be used to drag a CdkDrag instance. */
+class CdkDragHandle {
+    constructor(element, parentDrag) {
+        this.element = element;
+        /** Emits when the state of the handle has changed. */
+        this._stateChanges = new Subject();
         this._disabled = false;
+        this._parentDrag = parentDrag;
+        toggleNativeDragInteractions(element.nativeElement, false);
     }
-    /** Whether starting a dragging sequence from inside this group is disabled. */
+    /** Whether starting to drag through this handle is disabled. */
     get disabled() { return this._disabled; }
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
+        this._stateChanges.next(this);
     }
     ngOnDestroy() {
-        this._items.clear();
+        this._stateChanges.complete();
     }
 }
-CdkDropListGroup.decorators = [
+CdkDragHandle.decorators = [
     { type: Directive, args: [{
-                selector: '[cdkDropListGroup]',
-                exportAs: 'cdkDropListGroup',
+                selector: '[cdkDragHandle]',
+                host: {
+                    'class': 'cdk-drag-handle'
+                },
+                providers: [{ provide: CDK_DRAG_HANDLE, useExisting: CdkDragHandle }],
             },] }
 ];
-CdkDropListGroup.propDecorators = {
-    disabled: [{ type: Input, args: ['cdkDropListGroupDisabled',] }]
+CdkDragHandle.ctorParameters = () => [
+    { type: ElementRef },
+    { type: undefined, decorators: [{ type: Inject, args: [CDK_DRAG_PARENT,] }, { type: Optional }, { type: SkipSelf }] }
+];
+CdkDragHandle.propDecorators = {
+    disabled: [{ type: Input, args: ['cdkDragHandleDisabled',] }]
 };
 
 /**
@@ -2875,192 +2792,327 @@ CdkDropListGroup.propDecorators = {
  * 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
  */
-/** Counter used to generate unique ids for drop zones. */
-let _uniqueIdCounter = 0;
-const ɵ0 = undefined;
-/** Container that wraps a set of draggable items. */
-class CdkDropList {
+/**
+ * Injection token that can be used to reference instances of `CdkDragPlaceholder`. It serves as
+ * alternative token to the actual `CdkDragPlaceholder` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const CDK_DRAG_PLACEHOLDER = new InjectionToken('CdkDragPlaceholder');
+/**
+ * Element that will be used as a template for the placeholder of a CdkDrag when
+ * it is being dragged. The placeholder is displayed in place of the element being dragged.
+ */
+class CdkDragPlaceholder {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+CdkDragPlaceholder.decorators = [
+    { type: Directive, args: [{
+                selector: 'ng-template[cdkDragPlaceholder]',
+                providers: [{ provide: CDK_DRAG_PLACEHOLDER, useExisting: CdkDragPlaceholder }],
+            },] }
+];
+CdkDragPlaceholder.ctorParameters = () => [
+    { type: TemplateRef }
+];
+CdkDragPlaceholder.propDecorators = {
+    data: [{ type: Input }]
+};
+
+/**
+ * @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
+ */
+/**
+ * Injection token that can be used to reference instances of `CdkDragPreview`. It serves as
+ * alternative token to the actual `CdkDragPreview` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const CDK_DRAG_PREVIEW = new InjectionToken('CdkDragPreview');
+/**
+ * Element that will be used as a template for the preview
+ * of a CdkDrag when it is being dragged.
+ */
+class CdkDragPreview {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+        this._matchSize = false;
+    }
+    /** Whether the preview should preserve the same size as the item that is being dragged. */
+    get matchSize() { return this._matchSize; }
+    set matchSize(value) { this._matchSize = coerceBooleanProperty(value); }
+}
+CdkDragPreview.decorators = [
+    { type: Directive, args: [{
+                selector: 'ng-template[cdkDragPreview]',
+                providers: [{ provide: CDK_DRAG_PREVIEW, useExisting: CdkDragPreview }],
+            },] }
+];
+CdkDragPreview.ctorParameters = () => [
+    { type: TemplateRef }
+];
+CdkDragPreview.propDecorators = {
+    data: [{ type: Input }],
+    matchSize: [{ type: Input }]
+};
+
+/**
+ * @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
+ */
+/** Element that can be moved inside a CdkDropList container. */
+class CdkDrag {
     constructor(
-    /** Element that the drop list is attached to. */
-    element, dragDrop, _changeDetectorRef, _dir, _group, 
-    /**
-     * @deprecated _scrollDispatcher parameter to become required.
-     * @breaking-change 11.0.0
-     */
-    _scrollDispatcher, config) {
+    /** Element that the draggable is attached to. */
+    element, 
+    /** Droppable container that the draggable is a part of. */
+    dropContainer, _document, _ngZone, _viewContainerRef, config, _dir, dragDrop, _changeDetectorRef, _selfHandle) {
         this.element = element;
-        this._changeDetectorRef = _changeDetectorRef;
+        this.dropContainer = dropContainer;
+        this._document = _document;
+        this._ngZone = _ngZone;
+        this._viewContainerRef = _viewContainerRef;
         this._dir = _dir;
-        this._group = _group;
-        this._scrollDispatcher = _scrollDispatcher;
-        /** Emits when the list has been destroyed. */
+        this._changeDetectorRef = _changeDetectorRef;
+        this._selfHandle = _selfHandle;
         this._destroyed = new Subject();
-        /**
-         * Other draggable containers that this container is connected to and into which the
-         * container's items can be transferred. Can either be references to other drop containers,
-         * or their unique IDs.
-         */
-        this.connectedTo = [];
-        /**
-         * Unique ID for the drop zone. Can be used as a reference
-         * in the `connectedTo` of another `CdkDropList`.
-         */
-        this.id = `cdk-drop-list-${_uniqueIdCounter++}`;
-        /**
-         * Function that is used to determine whether an item
-         * is allowed to be moved into a drop container.
-         */
-        this.enterPredicate = () => true;
-        /** Emits when the user drops an item inside the container. */
-        this.dropped = new EventEmitter();
-        /**
-         * Emits when the user has moved a new drag item into this container.
-         */
+        /** Emits when the user starts dragging the item. */
+        this.started = new EventEmitter();
+        /** Emits when the user has released a drag item, before any animations have started. */
+        this.released = new EventEmitter();
+        /** Emits when the user stops dragging an item in the container. */
+        this.ended = new EventEmitter();
+        /** Emits when the user has moved the item into a new container. */
         this.entered = new EventEmitter();
-        /**
-         * Emits when the user removes an item from the container
-         * by dragging it into another container.
-         */
+        /** Emits when the user removes the item its container by dragging it into another container. */
         this.exited = new EventEmitter();
-        /** Emits as the user is swapping items while actively dragging. */
-        this.sorted = new EventEmitter();
+        /** Emits when the user drops the item inside a container. */
+        this.dropped = new EventEmitter();
         /**
-         * Keeps track of the items that are registered with this container. Historically we used to
-         * do this with a `ContentChildren` query, however queries don't handle transplanted views very
-         * well which means that we can't handle cases like dragging the headers of a `mat-table`
-         * correctly. What we do instead is to have the items register themselves with the container
-         * and then we sort them based on their position in the DOM.
+         * Emits as the user is dragging the item. Use with caution,
+         * because this event will fire for every pixel that the user has dragged.
          */
-        this._unsortedItems = new Set();
-        this._dropListRef = dragDrop.createDropList(element);
-        this._dropListRef.data = this;
+        this.moved = new Observable((observer) => {
+            const subscription = this._dragRef.moved.pipe(map(movedEvent => ({
+                source: this,
+                pointerPosition: movedEvent.pointerPosition,
+                event: movedEvent.event,
+                delta: movedEvent.delta,
+                distance: movedEvent.distance
+            }))).subscribe(observer);
+            return () => {
+                subscription.unsubscribe();
+            };
+        });
+        this._dragRef = dragDrop.createDrag(element, {
+            dragStartThreshold: config && config.dragStartThreshold != null ?
+                config.dragStartThreshold : 5,
+            pointerDirectionChangeThreshold: config && config.pointerDirectionChangeThreshold != null ?
+                config.pointerDirectionChangeThreshold : 5,
+            zIndex: config === null || config === void 0 ? void 0 : config.zIndex
+        });
+        this._dragRef.data = this;
         if (config) {
             this._assignDefaults(config);
         }
-        this._dropListRef.enterPredicate = (drag, drop) => {
-            return this.enterPredicate(drag.data, drop.data);
-        };
-        this._setupInputSyncSubscription(this._dropListRef);
-        this._handleEvents(this._dropListRef);
-        CdkDropList._dropLists.push(this);
-        if (_group) {
-            _group._items.add(this);
+        // Note that usually the container is assigned when the drop list is picks up the item, but in
+        // some cases (mainly transplanted views with OnPush, see #18341) we may end up in a situation
+        // where there are no items on the first change detection pass, but the items get picked up as
+        // soon as the user triggers another pass by dragging. This is a problem, because the item would
+        // have to switch from standalone mode to drag mode in the middle of the dragging sequence which
+        // is too late since the two modes save different kinds of information. We work around it by
+        // assigning the drop container both from here and the list.
+        if (dropContainer) {
+            this._dragRef._withDropContainer(dropContainer._dropListRef);
+            dropContainer.addItem(this);
         }
+        this._syncInputs(this._dragRef);
+        this._handleEvents(this._dragRef);
     }
-    /** Whether starting a dragging sequence from this container is disabled. */
+    /** Whether starting to drag this element is disabled. */
     get disabled() {
-        return this._disabled || (!!this._group && this._group.disabled);
+        return this._disabled || (this.dropContainer && this.dropContainer.disabled);
     }
     set disabled(value) {
-        // Usually we sync the directive and ref state right before dragging starts, in order to have
-        // a single point of failure and to avoid having to use setters for everything. `disabled` is
-        // a special case, because it can prevent the `beforeStarted` event from firing, which can lock
-        // the user in a disabled state, so we also need to sync it as it's being set.
-        this._dropListRef.disabled = this._disabled = coerceBooleanProperty(value);
+        this._disabled = coerceBooleanProperty(value);
+        this._dragRef.disabled = this._disabled;
     }
-    /** Registers an items with the drop list. */
-    addItem(item) {
-        this._unsortedItems.add(item);
-        if (this._dropListRef.isDragging()) {
-            this._syncItemsWithRef();
+    /**
+     * Returns the element that is being used as a placeholder
+     * while the current element is being dragged.
+     */
+    getPlaceholderElement() {
+        return this._dragRef.getPlaceholderElement();
+    }
+    /** Returns the root draggable element. */
+    getRootElement() {
+        return this._dragRef.getRootElement();
+    }
+    /** Resets a standalone drag item to its initial position. */
+    reset() {
+        this._dragRef.reset();
+    }
+    /**
+     * Gets the pixel coordinates of the draggable outside of a drop container.
+     */
+    getFreeDragPosition() {
+        return this._dragRef.getFreeDragPosition();
+    }
+    ngAfterViewInit() {
+        // We need to wait for the zone to stabilize, in order for the reference
+        // element to be in the proper place in the DOM. This is mostly relevant
+        // for draggable elements inside portals since they get stamped out in
+        // their original DOM position and then they get transferred to the portal.
+        this._ngZone.onStable.asObservable()
+            .pipe(take(1), takeUntil(this._destroyed))
+            .subscribe(() => {
+            this._updateRootElement();
+            // Listen for any newly-added handles.
+            this._handles.changes.pipe(startWith(this._handles), 
+            // Sync the new handles with the DragRef.
+            tap((handles) => {
+                const childHandleElements = handles
+                    .filter(handle => handle._parentDrag === this)
+                    .map(handle => handle.element);
+                // Usually handles are only allowed to be a descendant of the drag element, but if
+                // the consumer defined a different drag root, we should allow the drag element
+                // itself to be a handle too.
+                if (this._selfHandle && this.rootElementSelector) {
+                    childHandleElements.push(this.element);
+                }
+                this._dragRef.withHandles(childHandleElements);
+            }), 
+            // Listen if the state of any of the handles changes.
+            switchMap((handles) => {
+                return merge(...handles.map(item => {
+                    return item._stateChanges.pipe(startWith(item));
+                }));
+            }), takeUntil(this._destroyed)).subscribe(handleInstance => {
+                // Enabled/disable the handle that changed in the DragRef.
+                const dragRef = this._dragRef;
+                const handle = handleInstance.element.nativeElement;
+                handleInstance.disabled ? dragRef.disableHandle(handle) : dragRef.enableHandle(handle);
+            });
+            if (this.freeDragPosition) {
+                this._dragRef.setFreeDragPosition(this.freeDragPosition);
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        const rootSelectorChange = changes['rootElementSelector'];
+        const positionChange = changes['freeDragPosition'];
+        // We don't have to react to the first change since it's being
+        // handled in `ngAfterViewInit` where it needs to be deferred.
+        if (rootSelectorChange && !rootSelectorChange.firstChange) {
+            this._updateRootElement();
         }
-    }
-    /** Removes an item from the drop list. */
-    removeItem(item) {
-        this._unsortedItems.delete(item);
-        if (this._dropListRef.isDragging()) {
-            this._syncItemsWithRef();
+        // Skip the first change since it's being handled in `ngAfterViewInit`.
+        if (positionChange && !positionChange.firstChange && this.freeDragPosition) {
+            this._dragRef.setFreeDragPosition(this.freeDragPosition);
         }
     }
-    /** Gets the registered items in the list, sorted by their position in the DOM. */
-    getSortedItems() {
-        return Array.from(this._unsortedItems).sort((a, b) => {
-            const documentPosition = a._dragRef.getVisibleElement().compareDocumentPosition(b._dragRef.getVisibleElement());
-            // `compareDocumentPosition` returns a bitmask so we have to use a bitwise operator.
-            // https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
-            // tslint:disable-next-line:no-bitwise
-            return documentPosition & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
-        });
-    }
     ngOnDestroy() {
-        const index = CdkDropList._dropLists.indexOf(this);
-        if (index > -1) {
-            CdkDropList._dropLists.splice(index, 1);
-        }
-        if (this._group) {
-            this._group._items.delete(this);
+        if (this.dropContainer) {
+            this.dropContainer.removeItem(this);
         }
-        this._unsortedItems.clear();
-        this._dropListRef.dispose();
         this._destroyed.next();
         this._destroyed.complete();
+        this._dragRef.dispose();
     }
-    /** Syncs the inputs of the CdkDropList with the options of the underlying DropListRef. */
-    _setupInputSyncSubscription(ref) {
-        if (this._dir) {
-            this._dir.change
-                .pipe(startWith(this._dir.value), takeUntil(this._destroyed))
-                .subscribe(value => ref.withDirection(value));
+    /** Syncs the root element with the `DragRef`. */
+    _updateRootElement() {
+        const element = this.element.nativeElement;
+        const rootElement = this.rootElementSelector ?
+            getClosestMatchingAncestor(element, this.rootElementSelector) : element;
+        if (rootElement && rootElement.nodeType !== this._document.ELEMENT_NODE) {
+            throw Error(`cdkDrag must be attached to an element node. ` +
+                `Currently attached to "${rootElement.nodeName}".`);
+        }
+        this._dragRef.withRootElement(rootElement || element);
+    }
+    /** Gets the boundary element, based on the `boundaryElement` value. */
+    _getBoundaryElement() {
+        const boundary = this.boundaryElement;
+        if (!boundary) {
+            return null;
+        }
+        if (typeof boundary === 'string') {
+            return getClosestMatchingAncestor(this.element.nativeElement, boundary);
+        }
+        const element = coerceElement(boundary);
+        if (isDevMode() && !element.contains(this.element.nativeElement)) {
+            throw Error('Draggable element is not inside of the node passed into cdkDragBoundary.');
         }
+        return element;
+    }
+    /** Syncs the inputs of the CdkDrag with the options of the underlying DragRef. */
+    _syncInputs(ref) {
         ref.beforeStarted.subscribe(() => {
-            const siblings = coerceArray(this.connectedTo).map(drop => {
-                return typeof drop === 'string' ?
-                    CdkDropList._dropLists.find(list => list.id === drop) : drop;
-            });
-            if (this._group) {
-                this._group._items.forEach(drop => {
-                    if (siblings.indexOf(drop) === -1) {
-                        siblings.push(drop);
-                    }
-                });
-            }
-            // 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) {
-                const scrollableParents = this._scrollDispatcher
-                    .getAncestorScrollContainers(this.element)
-                    .map(scrollable => 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;
+            if (!ref.isDragging()) {
+                const dir = this._dir;
+                const dragStartDelay = this.dragStartDelay;
+                const placeholder = this._placeholderTemplate ? {
+                    template: this._placeholderTemplate.templateRef,
+                    context: this._placeholderTemplate.data,
+                    viewContainer: this._viewContainerRef
+                } : null;
+                const preview = this._previewTemplate ? {
+                    template: this._previewTemplate.templateRef,
+                    context: this._previewTemplate.data,
+                    matchSize: this._previewTemplate.matchSize,
+                    viewContainer: this._viewContainerRef
+                } : null;
+                ref.disabled = this.disabled;
+                ref.lockAxis = this.lockAxis;
+                ref.dragStartDelay = (typeof dragStartDelay === 'object' && dragStartDelay) ?
+                    dragStartDelay : coerceNumberProperty(dragStartDelay);
+                ref.constrainPosition = this.constrainPosition;
+                ref.previewClass = this.previewClass;
+                ref
+                    .withBoundaryElement(this._getBoundaryElement())
+                    .withPlaceholderTemplate(placeholder)
+                    .withPreviewTemplate(preview);
+                if (dir) {
+                    ref.withDirection(dir.value);
+                }
             }
-            ref.disabled = this.disabled;
-            ref.lockAxis = this.lockAxis;
-            ref.sortingDisabled = coerceBooleanProperty(this.sortingDisabled);
-            ref.autoScrollDisabled = coerceBooleanProperty(this.autoScrollDisabled);
-            ref
-                .connectedTo(siblings.filter(drop => drop && drop !== this).map(list => list._dropListRef))
-                .withOrientation(this.orientation);
         });
     }
-    /** Handles events from the underlying DropListRef. */
+    /** Handles the events from the underlying `DragRef`. */
     _handleEvents(ref) {
-        ref.beforeStarted.subscribe(() => {
-            this._syncItemsWithRef();
+        ref.started.subscribe(() => {
+            this.started.emit({ source: this });
+            // Since all of these events run outside of change detection,
+            // we need to ensure that everything is marked correctly.
+            this._changeDetectorRef.markForCheck();
+        });
+        ref.released.subscribe(() => {
+            this.released.emit({ source: this });
+        });
+        ref.ended.subscribe(event => {
+            this.ended.emit({ source: this, distance: event.distance });
+            // Since all of these events run outside of change detection,
+            // we need to ensure that everything is marked correctly.
             this._changeDetectorRef.markForCheck();
         });
         ref.entered.subscribe(event => {
             this.entered.emit({
-                container: this,
-                item: event.item.data,
+                container: event.container.data,
+                item: this,
                 currentIndex: event.currentIndex
             });
         });
         ref.exited.subscribe(event => {
             this.exited.emit({
-                container: this,
-                item: event.item.data
-            });
-            this._changeDetectorRef.markForCheck();
-        });
-        ref.sorted.subscribe(event => {
-            this.sorted.emit({
-                previousIndex: event.previousIndex,
-                currentIndex: event.currentIndex,
-                container: this,
-                item: event.item.data
+                container: event.container.data,
+                item: this
             });
         });
         ref.dropped.subscribe(event => {
@@ -3069,75 +3121,92 @@ class CdkDropList {
                 currentIndex: event.currentIndex,
                 previousContainer: event.previousContainer.data,
                 container: event.container.data,
-                item: event.item.data,
                 isPointerOverContainer: event.isPointerOverContainer,
+                item: this,
                 distance: event.distance
             });
-            // Mark for check since all of these events run outside of change
-            // detection and we're not guaranteed for something else to have triggered it.
-            this._changeDetectorRef.markForCheck();
         });
     }
     /** Assigns the default input values based on a provided config object. */
     _assignDefaults(config) {
-        const { lockAxis, draggingDisabled, sortingDisabled, listAutoScrollDisabled, listOrientation } = config;
+        const { lockAxis, dragStartDelay, constrainPosition, previewClass, boundaryElement, draggingDisabled, rootElementSelector } = config;
         this.disabled = draggingDisabled == null ? false : draggingDisabled;
-        this.sortingDisabled = sortingDisabled == null ? false : sortingDisabled;
-        this.autoScrollDisabled = listAutoScrollDisabled == null ? false : listAutoScrollDisabled;
-        this.orientation = listOrientation || 'vertical';
+        this.dragStartDelay = dragStartDelay || 0;
         if (lockAxis) {
             this.lockAxis = lockAxis;
         }
-    }
-    /** Syncs up the registered drag items with underlying drop list ref. */
-    _syncItemsWithRef() {
-        this._dropListRef.withItems(this.getSortedItems().map(item => item._dragRef));
+        if (constrainPosition) {
+            this.constrainPosition = constrainPosition;
+        }
+        if (previewClass) {
+            this.previewClass = previewClass;
+        }
+        if (boundaryElement) {
+            this.boundaryElement = boundaryElement;
+        }
+        if (rootElementSelector) {
+            this.rootElementSelector = rootElementSelector;
+        }
     }
 }
-/** Keeps track of the drop lists that are currently on the page. */
-CdkDropList._dropLists = [];
-CdkDropList.decorators = [
+CdkDrag.decorators = [
     { type: Directive, args: [{
-                selector: '[cdkDropList], cdk-drop-list',
-                exportAs: 'cdkDropList',
-                providers: [
-                    // Prevent child drop lists from picking up the same group as their parent.
-                    { provide: CdkDropListGroup, useValue: ɵ0 },
-                    { provide: CDK_DROP_LIST, useExisting: CdkDropList },
-                ],
+                selector: '[cdkDrag]',
+                exportAs: 'cdkDrag',
                 host: {
-                    'class': 'cdk-drop-list',
-                    '[id]': 'id',
-                    '[class.cdk-drop-list-disabled]': 'disabled',
-                    '[class.cdk-drop-list-dragging]': '_dropListRef.isDragging()',
-                    '[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()',
-                }
+                    'class': 'cdk-drag',
+                    '[class.cdk-drag-disabled]': 'disabled',
+                    '[class.cdk-drag-dragging]': '_dragRef.isDragging()',
+                },
+                providers: [{ provide: CDK_DRAG_PARENT, useExisting: CdkDrag }]
             },] }
 ];
-CdkDropList.ctorParameters = () => [
+CdkDrag.ctorParameters = () => [
     { type: ElementRef },
+    { type: undefined, decorators: [{ type: Inject, args: [CDK_DROP_LIST,] }, { type: Optional }, { type: SkipSelf }] },
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
+    { type: NgZone },
+    { type: ViewContainerRef },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [CDK_DRAG_CONFIG,] }] },
+    { type: Directionality, decorators: [{ type: Optional }] },
     { type: DragDrop },
     { type: ChangeDetectorRef },
-    { type: Directionality, decorators: [{ type: Optional }] },
-    { type: CdkDropListGroup, decorators: [{ type: Optional }, { type: SkipSelf }] },
-    { type: ScrollDispatcher },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [CDK_DRAG_CONFIG,] }] }
+    { type: CdkDragHandle, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [CDK_DRAG_HANDLE,] }] }
 ];
-CdkDropList.propDecorators = {
-    connectedTo: [{ type: Input, args: ['cdkDropListConnectedTo',] }],
-    data: [{ type: Input, args: ['cdkDropListData',] }],
-    orientation: [{ type: Input, args: ['cdkDropListOrientation',] }],
-    id: [{ type: Input }],
-    lockAxis: [{ type: Input, args: ['cdkDropListLockAxis',] }],
-    disabled: [{ type: Input, args: ['cdkDropListDisabled',] }],
-    sortingDisabled: [{ type: Input, args: ['cdkDropListSortingDisabled',] }],
-    enterPredicate: [{ type: Input, args: ['cdkDropListEnterPredicate',] }],
-    autoScrollDisabled: [{ type: Input, args: ['cdkDropListAutoScrollDisabled',] }],
-    dropped: [{ type: Output, args: ['cdkDropListDropped',] }],
-    entered: [{ type: Output, args: ['cdkDropListEntered',] }],
-    exited: [{ type: Output, args: ['cdkDropListExited',] }],
-    sorted: [{ type: Output, args: ['cdkDropListSorted',] }]
+CdkDrag.propDecorators = {
+    _handles: [{ type: ContentChildren, args: [CDK_DRAG_HANDLE, { descendants: true },] }],
+    _previewTemplate: [{ type: ContentChild, args: [CDK_DRAG_PREVIEW,] }],
+    _placeholderTemplate: [{ type: ContentChild, args: [CDK_DRAG_PLACEHOLDER,] }],
+    data: [{ type: Input, args: ['cdkDragData',] }],
+    lockAxis: [{ type: Input, args: ['cdkDragLockAxis',] }],
+    rootElementSelector: [{ type: Input, args: ['cdkDragRootElement',] }],
+    boundaryElement: [{ type: Input, args: ['cdkDragBoundary',] }],
+    dragStartDelay: [{ type: Input, args: ['cdkDragStartDelay',] }],
+    freeDragPosition: [{ type: Input, args: ['cdkDragFreeDragPosition',] }],
+    disabled: [{ type: Input, args: ['cdkDragDisabled',] }],
+    constrainPosition: [{ type: Input, args: ['cdkDragConstrainPosition',] }],
+    previewClass: [{ type: Input, args: ['cdkDragPreviewClass',] }],
+    started: [{ type: Output, args: ['cdkDragStarted',] }],
+    released: [{ type: Output, args: ['cdkDragReleased',] }],
+    ended: [{ type: Output, args: ['cdkDragEnded',] }],
+    entered: [{ type: Output, args: ['cdkDragEntered',] }],
+    exited: [{ type: Output, args: ['cdkDragExited',] }],
+    dropped: [{ type: Output, args: ['cdkDragDropped',] }],
+    moved: [{ type: Output, args: ['cdkDragMoved',] }]
 };
+/** Gets the closest ancestor of an element that matches a selector. */
+function getClosestMatchingAncestor(element, selector) {
+    let currentElement = element.parentElement;
+    while (currentElement) {
+        // IE doesn't support `matches` so we have to fall back to `msMatchesSelector`.
+        if (currentElement.matches ? currentElement.matches(selector) :
+            currentElement.msMatchesSelector(selector)) {
+            return currentElement;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return null;
+}
 
 /**
  * @license
@@ -3185,5 +3254,5 @@ DragDropModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { CDK_DRAG_CONFIG, CDK_DROP_LIST, CdkDrag, CdkDragHandle, CdkDragPlaceholder, CdkDragPreview, CdkDropList, CdkDropListGroup, DragDrop, DragDropModule, DragDropRegistry, DragRef, DropListRef, copyArrayItem, moveItemInArray, transferArrayItem, CDK_DRAG_PARENT as ɵangular_material_src_cdk_drag_drop_drag_drop_b };
+export { CDK_DRAG_CONFIG, CDK_DRAG_HANDLE, CDK_DRAG_PLACEHOLDER, CDK_DRAG_PREVIEW, CDK_DROP_LIST_GROUP, CdkDrag, CdkDragHandle, CdkDragPlaceholder, CdkDragPreview, CdkDropList, CdkDropListGroup, DragDrop, DragDropModule, DragDropRegistry, DragRef, DropListRef, copyArrayItem, moveItemInArray, transferArrayItem, CDK_DROP_LIST as ɵangular_material_src_cdk_drag_drop_drag_drop_b, CDK_DRAG_PARENT as ɵangular_material_src_cdk_drag_drop_drag_drop_c };
 //# sourceMappingURL=drag-drop.js.map