Skip to content

Commit c543cf6

Browse files
crisbetojelbourn
authored andcommitted
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.
1 parent c7dad7a commit c543cf6

File tree

5 files changed

+20
-2
lines changed

5 files changed

+20
-2
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -536,8 +536,12 @@ describe('CdkDrag', () => {
536536
fixture.detectChanges();
537537
const dragElement = fixture.componentInstance.dragElement.nativeElement;
538538

539+
expect(dragElement.classList).not.toContain('cdk-drag-disabled');
540+
539541
fixture.componentInstance.dragInstance.disabled = true;
542+
fixture.detectChanges();
540543

544+
expect(dragElement.classList).toContain('cdk-drag-disabled');
541545
expect(dragElement.style.transform).toBeFalsy();
542546
dragElementViaMouse(fixture, dragElement, 50, 100);
543547
expect(dragElement.style.transform).toBeFalsy();
@@ -2115,9 +2119,14 @@ describe('CdkDrag', () => {
21152119
const fixture = createComponent(DraggableInDropZone);
21162120
fixture.detectChanges();
21172121
const dragItems = fixture.componentInstance.dragItems;
2122+
const dropElement = fixture.componentInstance.dropInstance.element.nativeElement;
2123+
2124+
expect(dropElement.classList).not.toContain('cdk-drop-list-disabled');
21182125

21192126
fixture.componentInstance.dropInstance.disabled = true;
2127+
fixture.detectChanges();
21202128

2129+
expect(dropElement.classList).toContain('cdk-drop-list-disabled');
21212130
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
21222131
.toEqual(['Zero', 'One', 'Two', 'Three']);
21232132

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ export function CDK_DRAG_CONFIG_FACTORY(): DragRefConfig {
6969
exportAs: 'cdkDrag',
7070
host: {
7171
'class': 'cdk-drag',
72+
'[class.cdk-drag-disabled]': 'disabled',
7273
'[class.cdk-drag-dragging]': '_dragRef.isDragging()',
7374
},
7475
providers: [{provide: CDK_DRAG_PARENT, useExisting: CdkDrag}]

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export interface CdkDropListInternal extends CdkDropList {}
6262
host: {
6363
'class': 'cdk-drop-list',
6464
'[id]': 'id',
65+
'[class.cdk-drop-list-disabled]': 'disabled',
6566
'[class.cdk-drop-list-dragging]': '_dropListRef.isDragging()',
6667
'[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()',
6768
}

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,14 @@ by the directives:
7070

7171
| Selector | Description |
7272
|---------------------|--------------------------------------------------------------------------|
73-
| `.cdk-drop-list` | Corresponds to the `cdkDropList` container. |
73+
| `.cdk-drop-list` | Corresponds to the `cdkDropList` container. |
7474
| `.cdk-drag` | Corresponds to a `cdkDrag` instance. |
75+
| `.cdk-drag-disabled`| Class that is added to a disabled `cdkDrag`. |
7576
| `.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. |
7677
| `.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. |
7778
| `.cdk-drop-list-dragging` | A class that is added to `cdkDropList` while the user is dragging an item. |
78-
| `.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. |
79+
| `.cdk-drop-list-disabled` | A class that is added to `cdkDropList` when it is disabled. |
80+
| `.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. |
7981

8082
### Animations
8183
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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
font-size: 14px;
2424
}
2525

26+
.example-box.cdk-drag-disabled {
27+
background: #ccc;
28+
cursor: default;
29+
}
30+
2631
.cdk-drag-preview {
2732
box-sizing: border-box;
2833
border-radius: 4px;

0 commit comments

Comments
 (0)