fix(drag-drop): multiple parallel drag sequences when dragging nested drag items

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

@@ -412,6 +412,20 @@ describe('CdkDrag', () => {
       expect(dragElement.style.transform).toBeFalsy();
     }));
 
+    it('should stop propagation for the drag sequence start event', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.detectChanges();
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+      const event = createMouseEvent('mousedown');
+      spyOn(event, 'stopPropagation').and.callThrough();
+
+      dispatchEvent(dragElement, event);
+      fixture.detectChanges();
+
+      expect(event.stopPropagation).toHaveBeenCalled();
+    }));
+
   });
 
   describe('draggable with a handle', () => {

src/cdk/drag-drop/drag.ts

@@ -329,10 +329,13 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
    * @param event Browser event object that started the sequence.
    */
   private _initializeDragSequence(referenceElement: HTMLElement, event: MouseEvent | TouchEvent) {
-    const isDragging = this._isDragging();
+    // Always stop propagation for the event that initializes
+    // the dragging sequence, in order to prevent it from potentially
+    // starting another sequence for a draggable parent somewhere up the DOM tree.
+    event.stopPropagation();
 
     // Abort if the user is already dragging or is using a mouse button other than the primary one.
-    if (isDragging || (!this._isTouchEvent(event) && event.button !== 0)) {
+    if (this._isDragging() || (!this._isTouchEvent(event) && event.button !== 0)) {
       return;
     }