fix(drag-drop): don't allow user to move item into container that isn't connected to current one by passing it over an intermediate one that is (#15660)

In a setup like `Container 1 <-> Container 2 <-> Container 3` the user shouldn't be allowed to move items between containers 1 and 3, because they're not connected. This is currently possible if the user passes it through container 2 first. These changes rework the logic so that this is no longer possible.

Fixes #15191.

Author: crisbeto

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

@@ -3193,6 +3193,63 @@ describe('CdkDrag', () => {
 
       }));
 
+    it('should not be able to move an item into a drop container that the initial container is ' +
+      'not connected to by passing it over an intermediate one that is', fakeAsync(() => {
+        const fixture = createComponent(ConnectedDropZones);
+        fixture.detectChanges();
+
+        const dropInstances = fixture.componentInstance.dropInstances.toArray();
+        dropInstances[0].connectedTo = [dropInstances[1]];
+        dropInstances[1].connectedTo = [dropInstances[0], dropInstances[2]];
+        dropInstances[2].connectedTo = [dropInstances[1]];
+        fixture.detectChanges();
+
+        const groups = fixture.componentInstance.groupedDragItems;
+        const dropZones = dropInstances.map(d => d.element.nativeElement);
+        const item = groups[0][1];
+        const intermediateRect = dropZones[1].getBoundingClientRect();
+        const finalRect = dropZones[2].getBoundingClientRect();
+
+        startDraggingViaMouse(fixture, item.element.nativeElement);
+
+        const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!;
+
+        expect(placeholder).toBeTruthy();
+        expect(dropZones[0].contains(placeholder))
+            .toBe(true, 'Expected placeholder to be inside the first container.');
+
+        dispatchMouseEvent(document, 'mousemove',
+            intermediateRect.left + 1, intermediateRect.top + 1);
+        fixture.detectChanges();
+
+        expect(dropZones[1].contains(placeholder))
+            .toBe(true, 'Expected placeholder to be inside second container.');
+
+        dispatchMouseEvent(document, 'mousemove', finalRect.left + 1, finalRect.top + 1);
+        fixture.detectChanges();
+
+        expect(dropZones[1].contains(placeholder))
+            .toBe(true, 'Expected placeholder to remain in the second container.');
+
+        dispatchMouseEvent(document, 'mouseup');
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+
+        const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0];
+
+        expect(event).toBeTruthy();
+        expect(event).toEqual(jasmine.objectContaining({
+          previousIndex: 1,
+          currentIndex: 1,
+          item: groups[0][1],
+          container: dropInstances[1],
+          previousContainer: dropInstances[0],
+          isPointerOverContainer: false
+        }));
+
+      }));
+
     it('should return the item to its initial position, if sorting in the source container ' +
       'was disabled', fakeAsync(() => {
         const fixture = createComponent(ConnectedDropZones);

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

@@ -754,8 +754,7 @@ export class DragRef<T = any> {
    */
   private _updateActiveDropContainer({x, y}: Point) {
     // Drop container that draggable has been moved into.
-    let newContainer = this._dropContainer!._getSiblingContainerFromPosition(this, x, y) ||
-        this._initialContainer._getSiblingContainerFromPosition(this, x, y);
+    let newContainer = this._initialContainer._getSiblingContainerFromPosition(this, x, y);
 
     // If we couldn't find a new container to move the item into, and the item has left it's
     // initial container, check whether the it's over the initial container. This handles the