fix(drag-drop): set class when item or list is disabled (#14769)

Sets a class on disabled `CdkDrag` and `CdkDropList` to make it easier to style the elements while they're disabled.

Fixes #14760.

Author: crisbeto

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

@@ -536,8 +536,12 @@ describe('CdkDrag', () => {
       fixture.detectChanges();
       const dragElement = fixture.componentInstance.dragElement.nativeElement;
 
+      expect(dragElement.classList).not.toContain('cdk-drag-disabled');
+
       fixture.componentInstance.dragInstance.disabled = true;
+      fixture.detectChanges();
 
+      expect(dragElement.classList).toContain('cdk-drag-disabled');
       expect(dragElement.style.transform).toBeFalsy();
       dragElementViaMouse(fixture, dragElement, 50, 100);
       expect(dragElement.style.transform).toBeFalsy();
@@ -2115,9 +2119,14 @@ describe('CdkDrag', () => {
       const fixture = createComponent(DraggableInDropZone);
       fixture.detectChanges();
       const dragItems = fixture.componentInstance.dragItems;
+      const dropElement = fixture.componentInstance.dropInstance.element.nativeElement;
+
+      expect(dropElement.classList).not.toContain('cdk-drop-list-disabled');
 
       fixture.componentInstance.dropInstance.disabled = true;
+      fixture.detectChanges();
 
+      expect(dropElement.classList).toContain('cdk-drop-list-disabled');
       expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
           .toEqual(['Zero', 'One', 'Two', 'Three']);
 

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

@@ -69,6 +69,7 @@ export function CDK_DRAG_CONFIG_FACTORY(): DragRefConfig {
   exportAs: 'cdkDrag',
   host: {
     'class': 'cdk-drag',
+    '[class.cdk-drag-disabled]': 'disabled',
     '[class.cdk-drag-dragging]': '_dragRef.isDragging()',
   },
   providers: [{provide: CDK_DRAG_PARENT, useExisting: CdkDrag}]

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

@@ -62,6 +62,7 @@ export interface CdkDropListInternal extends CdkDropList {}
   host: {
     'class': 'cdk-drop-list',
     '[id]': 'id',
+    '[class.cdk-drop-list-disabled]': 'disabled',
     '[class.cdk-drop-list-dragging]': '_dropListRef.isDragging()',
     '[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()',
   }

src/cdk/drag-drop/drag-drop.md

@@ -70,12 +70,14 @@ by the directives:
 
 | Selector            | Description                                                              |
 |---------------------|--------------------------------------------------------------------------|
-| `.cdk-drop-list`    | Corresponds to the `cdkDropList` container.                                  |
+| `.cdk-drop-list`    | Corresponds to the `cdkDropList` container.                              |
 | `.cdk-drag`         | Corresponds to a `cdkDrag` instance.                                     |
+| `.cdk-drag-disabled`| Class that is added to a disabled `cdkDrag`.                             |
 | `.cdk-drag-preview` | This is the element that will be rendered next to the user's cursor as they're dragging an item in a sortable list. By default the element looks exactly like the element that is being dragged. |
 | `.cdk-drag-placeholder` | This is element that will be shown instead of the real element as it's being dragged inside a `cdkDropList`. By default this will look exactly like the element that is being sorted. |
 | `.cdk-drop-list-dragging` | A class that is added to `cdkDropList` while the user is dragging an item.  |
-| `.cdk-drop-list-receiving` | A class that is added to `cdkDropList` when it can receive an item that is being dragged inside a connected drop list.  |
+| `.cdk-drop-list-disabled` | A class that is added to `cdkDropList` when it is disabled.  |
+| `.cdk-drop-list-receiving`| A class that is added to `cdkDropList` when it can receive an item that is being dragged inside a connected drop list.  |
 
 ### Animations
 The drag-and-drop module supports animations both while sorting an element inside a list, as well as

src/material-examples/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.css

@@ -23,6 +23,11 @@
   font-size: 14px;
 }
 
+.example-box.cdk-drag-disabled {
+  background: #ccc;
+  cursor: default;
+}
+
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;