diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts
index 01de1d6e92a1..8bb9e04e88ac 100644
--- a/src/cdk/drag-drop/directives/drag.spec.ts
+++ b/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: `
-
+
`
})
-class ConnectedDropZonesViaGroupDirective extends ConnectedDropZones {}
+class ConnectedDropZonesViaGroupDirective extends ConnectedDropZones {
+ groupDisabled = false;
+}
@Component({
diff --git a/src/cdk/drag-drop/directives/drop-list-group.ts b/src/cdk/drag-drop/directives/drop-list-group.ts
index e7bea56f2b06..ef57b25e705a 100644
--- a/src/cdk/drag-drop/directives/drop-list-group.ts
+++ b/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 implements OnDestroy {
/** Drop lists registered inside the group. */
readonly _items = new Set();
+ /** 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();
}
diff --git a/src/cdk/drag-drop/directives/drop-list.ts b/src/cdk/drag-drop/directives/drop-list.ts
index ae5aaa50a4dc..a1f63f76518f 100644
--- a/src/cdk/drag-drop/directives/drop-list.ts
+++ b/src/cdk/drag-drop/directives/drop-list.ts
@@ -96,10 +96,13 @@ export class CdkDropList 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
diff --git a/tools/public_api_guard/cdk/drag-drop.d.ts b/tools/public_api_guard/cdk/drag-drop.d.ts
index b227f4df3e28..12655937157b 100644
--- a/tools/public_api_guard/cdk/drag-drop.d.ts
+++ b/tools/public_api_guard/cdk/drag-drop.d.ts
@@ -156,6 +156,7 @@ export interface CdkDropListContainer {
export declare class CdkDropListGroup implements OnDestroy {
readonly _items: Set;
+ disabled: boolean;
ngOnDestroy(): void;
}