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

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

Author: crisbeto

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

@@ -493,6 +493,7 @@ describe('CdkDrag', () => {
       expect(dragElement.style.touchAction)
         .not.toEqual('none', 'should not disable touchAction on when there is a drag handle');
     });
+
     it('should be able to reset a freely-dragged item to its initial position', fakeAsync(() => {
       const fixture = createComponent(StandaloneDraggable);
       fixture.detectChanges();
@@ -1760,6 +1761,31 @@ describe('CdkDrag', () => {
           .toEqual(['Zero', 'One', 'Two', 'Three']);
     }));
 
+    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']);
+    }));
+
   });
 
   describe('in a connected drop container', () => {
@@ -2501,7 +2527,7 @@ class ConnectedDropZones implements AfterViewInit {
     }
   `],
   template: `
-    <div cdkDropListGroup>
+    <div cdkDropListGroup [cdkDropListGroupDisabled]="groupDisabled">
       <div
         cdkDropList
         [cdkDropListData]="todo"
@@ -2518,7 +2544,9 @@ class ConnectedDropZones implements AfterViewInit {
     </div>
   `
 })
-class ConnectedDropZonesViaGroupDirective extends ConnectedDropZones {}
+class ConnectedDropZonesViaGroupDirective extends ConnectedDropZones {
+  groupDisabled = false;
+}
 
 
 @Component({

src/cdk/drag-drop/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`
@@ -21,6 +22,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/drop-list.ts

@@ -118,7 +118,9 @@ export class CdkDropList<T = any> implements OnInit, OnDestroy {
 
   /** Whether starting a dragging sequence from this container is disabled. */
   @Input('cdkDropListDisabled')
-  get disabled(): boolean { return this._disabled; }
+  get disabled(): boolean {
+    return this._disabled || (!!this._group && this._group.disabled);
+  }
   set disabled(value: boolean) {
     this._disabled = coerceBooleanProperty(value);
   }