fix(cdk/drag-drop): error if dragging starts from active sibling container (#20704)

Currently we have a restriction that prevents users from starting a new drag sequence
if an item within the same container is being dragged, however they can start one
from a connected container and pull the item into the active one and start dragging
it there. This can cause an error if it happens while the item's drop animation is
running.

These changes add an extra check so that dragging can't be started out of a connected
container either.

Relates to #20623.

(cherry picked from commit 6d86f0f)

Author: crisbeto

src/cdk/drag-drop/directives/drag.spec.ts

@@ -5336,6 +5336,25 @@ describe('CdkDrag', () => {
       expect(console.warn).toHaveBeenCalledWith(`CdkDropList could not find connected drop ` +
                                                 `list with id "does-not-exist"`);
     }));
+
+    it('should not be able to start a drag sequence while a connected container is active',
+      fakeAsync(() => {
+        const fixture = createComponent(ConnectedDropZones);
+        fixture.detectChanges();
+        const item = fixture.componentInstance.groupedDragItems[0][0];
+        const itemInOtherList = fixture.componentInstance.groupedDragItems[1][0];
+
+        startDraggingViaMouse(fixture, item.element.nativeElement);
+
+        expect(document.querySelectorAll('.cdk-drag-dragging').length)
+            .toBe(1, 'Expected one item to be dragged initially.');
+
+        startDraggingViaMouse(fixture, itemInOtherList.element.nativeElement);
+
+        expect(document.querySelectorAll('.cdk-drag-dragging').length)
+            .toBe(1, 'Expected only one item to continue to be dragged.');
+      }));
+
   });
 
   describe('with nested drags', () => {

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

@@ -585,6 +585,8 @@ export class DragRef<T = any> {
       // per pixel of movement (e.g. if the user moves their pointer quickly).
       if (isOverThreshold) {
         const isDelayElapsed = Date.now() >= this._dragStartTime + this._getDragStartDelay(event);
+        const container = this._dropContainer;
+
         if (!isDelayElapsed) {
           this._endDragSequence(event);
           return;
@@ -593,7 +595,7 @@ export class DragRef<T = any> {
         // Prevent other drag sequences from starting while something in the container is still
         // being dragged. This can happen while we're waiting for the drop animation to finish
         // and can cause errors, because some elements might still be moving around.
-        if (!this._dropContainer || !this._dropContainer.isDragging()) {
+        if (!container || (!container.isDragging() && !container.isReceiving())) {
           this._hasStartedDragging = true;
           this._ngZone.run(() => this._startDragSequence(event));
         }