fix(drag-drop): allow for element in DropListRef to be changed

It doesn't look like there's a good reason to have the `element` be readonly, aside from minimizing the coercion logic, since we only use the element in a handful of places and we don't bind any events to it so we don't need any cleanup logic. These changes allow for the element to be swapped out by removing the `readonly`.

Fixes #15086.

Author: crisbeto

src/cdk/drag-drop/drag-ref.ts

@@ -689,7 +689,7 @@ export class DragRef<T = any> {
     if (this._nextSibling) {
       this._nextSibling.parentNode!.insertBefore(this._rootElement, this._nextSibling);
     } else {
-      this._initialContainer.element.appendChild(this._rootElement);
+      coerceElement(this._initialContainer.element).appendChild(this._rootElement);
     }
 
     this._destroyPreview();

src/cdk/drag-drop/drop-list-ref.ts

@@ -9,6 +9,7 @@
 import {ElementRef} from '@angular/core';
 import {DragDropRegistry} from './drag-drop-registry';
 import {Direction} from '@angular/cdk/bidi';
+import {coerceElement} from '@angular/cdk/coercion';
 import {Subject} from 'rxjs';
 import {moveItemInArray} from './drag-utils';
 import {DragRefInternal as DragRef} from './drag-ref';
@@ -51,7 +52,7 @@ export class DropListRef<T = any> {
   private _document: Document;
 
   /** Element that the drop list is attached to. */
-  readonly element: HTMLElement;
+  element: HTMLElement | ElementRef<HTMLElement>;
 
   /**
    * Unique ID for the drop list.
@@ -209,7 +210,7 @@ export class DropListRef<T = any> {
       element.parentElement!.insertBefore(placeholder, element);
       this._activeDraggables.splice(newIndex, 0, item);
     } else {
-      this.element.appendChild(placeholder);
+      coerceElement(this.element).appendChild(placeholder);
       this._activeDraggables.push(item);
     }
 
@@ -395,7 +396,7 @@ export class DropListRef<T = any> {
 
   /** Caches the position of the drop list. */
   private _cacheOwnPosition() {
-    this._clientRect = this.element.getBoundingClientRect();
+    this._clientRect = coerceElement(this.element).getBoundingClientRect();
   }
 
   /** Refreshes the position cache of the items and sibling containers. */
@@ -579,21 +580,23 @@ export class DropListRef<T = any> {
       return false;
     }
 
-    const elementFromPoint = this._document.elementFromPoint(x, y);
+    const elementFromPoint = this._document.elementFromPoint(x, y) as HTMLElement | null;
 
     // If there's no element at the pointer position, then
     // the client rect is probably scrolled out of the view.
     if (!elementFromPoint) {
       return false;
     }
 
+    const nativeElement = coerceElement(this.element);
+
     // The `ClientRect`, that we're using to find the container over which the user is
     // hovering, doesn't give us any information on whether the element has been scrolled
     // out of the view or whether it's overlapping with other containers. This means that
     // we could end up transferring the item into a container that's invisible or is positioned
     // below another one. We use the result from `elementFromPoint` to get the top-most element
     // at the pointer position and to find whether it's one of the intersecting drop containers.
-    return elementFromPoint === this.element || this.element.contains(elementFromPoint);
+    return elementFromPoint === nativeElement || nativeElement.contains(elementFromPoint);
   }
 
   /**

tools/public_api_guard/cdk/drag-drop.d.ts

@@ -276,7 +276,7 @@ export declare class DropListRef<T = any> {
         previousContainer: DropListRef<any>;
         isPointerOverContainer: boolean;
     }>;
-    readonly element: HTMLElement;
+    element: HTMLElement;
     enterPredicate: (drag: DragRef, drop: DropListRef) => boolean;
     entered: Subject<{
         item: DragRef;