feat(drag-drop): allow entire group of drop lists to be disabled (#14179

)

Makes it easier to disable dragging under an entire group of drop lists.

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

@@ -1917,7 +1917,31 @@ describe('CdkDrag', () => {
         dispatchEvent(document, endEvent);
         fixture.detectChanges();
       }).not.toThrow();
+    }));
+
+    it('should not move the item if the group is disabled', fakeAsync(() => {
+      const fixture = createComponent(ConnectedDropZonesViaGroupDirective);
+      fixture.detectChanges();
+      const dragItems = fixture.componentInstance.groupedDragItems[0];
+
+      fixture.componentInstance.groupDisabled = true;
+      fixture.detectChanges();
+
+      expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
+          .toEqual(['Zero', 'One', 'Two', 'Three']);
+
+      const firstItem = dragItems[0];
+      const thirdItemRect = dragItems[2].element.nativeElement.getBoundingClientRect();
 
+      dragElementViaMouse(fixture, firstItem.element.nativeElement,
+          thirdItemRect.right + 1, thirdItemRect.top + 1);
+      flush();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled();
+
+      expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
+          .toEqual(['Zero', 'One', 'Two', 'Three']);
     }));
 
   });
@@ -2743,7 +2767,7 @@ class ConnectedDropZones implements AfterViewInit {
     }
   `],
   template: `
-    <div cdkDropListGroup>
+    <div cdkDropListGroup [cdkDropListGroupDisabled]="groupDisabled">
       <div
         cdkDropList
         [cdkDropListData]="todo"
@@ -2760,7 +2784,9 @@ class ConnectedDropZones implements AfterViewInit {
     </div>
   `
 })
-class ConnectedDropZonesViaGroupDirective extends ConnectedDropZones {}
+class ConnectedDropZonesViaGroupDirective extends ConnectedDropZones {
+  groupDisabled = false;
+}
 
 
 @Component({

src/cdk/drag-drop/directives/drop-list-group.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, OnDestroy} from '@angular/core';
+import {Directive, OnDestroy, Input} from '@angular/core';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
 
 /**
  * Declaratively connects sibling `cdkDropList` instances together. All of the `cdkDropList`
@@ -22,6 +23,14 @@ export class CdkDropListGroup<T> implements OnDestroy {
   /** Drop lists registered inside the group. */
   readonly _items = new Set<T>();
 
+  /** Whether starting a dragging sequence from inside this group is disabled. */
+  @Input('cdkDropListGroupDisabled')
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    this._disabled = coerceBooleanProperty(value);
+  }
+  private _disabled = false;
+
   ngOnDestroy() {
     this._items.clear();
   }

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

@@ -96,10 +96,13 @@ export class CdkDropList<T = any> implements CdkDropListContainer, OnDestroy {
 
   /** Whether starting a dragging sequence from this container is disabled. */
   @Input('cdkDropListDisabled')
-  get disabled(): boolean { return this._dropListRef.disabled; }
+  get disabled(): boolean {
+    return this._disabled || (!!this._group && this._group.disabled);
+  }
   set disabled(value: boolean) {
-    this._dropListRef.disabled = coerceBooleanProperty(value);
+    this._disabled = coerceBooleanProperty(value);
   }
+  private _disabled = false;
 
   /**
    * Function that is used to determine whether an item

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

@@ -156,6 +156,7 @@ export interface CdkDropListContainer<T = any> {
 
 export declare class CdkDropListGroup<T> implements OnDestroy {
     readonly _items: Set<T>;
+    disabled: boolean;
     ngOnDestroy(): void;
 }