From 0df720c6b1194ee88a54df43e3ac6ef47c6ade7e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 24 Aug 2018 05:37:08 +0200
Subject: [PATCH] fix(drag-drop): add class to indicate that an item is being
 dragged (#12810)

Simiarly to `cdk-drop`, these changes add a class to `cdkDrag` to make it easier to indicate that an item is being dragged.
---
 src/cdk/drag-drop/drag.spec.ts | 19 +++++++++++++++++++
 src/cdk/drag-drop/drag.ts      | 14 ++++++++++----
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/cdk/drag-drop/drag.spec.ts b/src/cdk/drag-drop/drag.spec.ts
index e2253be9566..dee3592aeff 100644
--- a/src/cdk/drag-drop/drag.spec.ts
+++ b/src/cdk/drag-drop/drag.spec.ts
@@ -303,6 +303,25 @@ describe('CdkDrag', () => {
       expect(dragElement.style.transform).toBe('translate3d(0px, 300px, 0px)');
     }));
 
+    it('should add a class while an element is being dragged', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.detectChanges();
+
+      const element = fixture.componentInstance.dragElement.nativeElement;
+
+      expect(element.classList).not.toContain('cdk-drag-dragging');
+
+      dispatchMouseEvent(element, 'mousedown');
+      fixture.detectChanges();
+
+      expect(element.classList).toContain('cdk-drag-dragging');
+
+      dispatchMouseEvent(document, 'mouseup');
+      fixture.detectChanges();
+
+      expect(element.classList).not.toContain('cdk-drag-dragging');
+    }));
+
   });
 
   describe('draggable with a handle', () => {
diff --git a/src/cdk/drag-drop/drag.ts b/src/cdk/drag-drop/drag.ts
index 2682ec5f367..1ed8de390b2 100644
--- a/src/cdk/drag-drop/drag.ts
+++ b/src/cdk/drag-drop/drag.ts
@@ -52,6 +52,7 @@ import {takeUntil} from 'rxjs/operators';
   exportAs: 'cdkDrag',
   host: {
     'class': 'cdk-drag',
+    '[class.cdk-drag-dragging]': '_isDragging()',
     '(mousedown)': '_startDragging($event)',
     '(touchstart)': '_startDragging($event)',
   }
@@ -189,7 +190,7 @@ export class CdkDrag<T = any> implements OnDestroy {
 
     // Do this check before removing from the registry since it'll
     // stop being considered as dragged once it is removed.
-    if (this._dragDropRegistry.isDragging(this)) {
+    if (this._isDragging()) {
       // Since we move out the element to the end of the body while it's being
       // dragged, we have to make sure that it's removed if it gets destroyed.
       this._removeElement(this.element.nativeElement);
@@ -220,11 +221,16 @@ export class CdkDrag<T = any> implements OnDestroy {
     }
   }
 
+  /** Checks whether the element is currently being dragged. */
+  _isDragging() {
+    return this._dragDropRegistry.isDragging(this);
+  }
+
   /** Handler for when the pointer is pressed down on the element or the handle. */
   private _pointerDown = (referenceElement: ElementRef<HTMLElement>,
                           event: MouseEvent | TouchEvent) => {
 
-    const isDragging = this._dragDropRegistry.isDragging(this);
+    const isDragging = this._isDragging();
 
     // Abort if the user is already dragging or is using a mouse button other than the primary one.
     if (isDragging || (!this._isTouchEvent(event) && event.button !== 0)) {
@@ -274,7 +280,7 @@ export class CdkDrag<T = any> implements OnDestroy {
   private _pointerMove = (event: MouseEvent | TouchEvent) => {
     // TODO(crisbeto): this should start dragging after a certain threshold,
     // otherwise we risk interfering with clicks on the element.
-    if (!this._dragDropRegistry.isDragging(this)) {
+    if (!this._isDragging()) {
       return;
     }
 
@@ -310,7 +316,7 @@ export class CdkDrag<T = any> implements OnDestroy {
 
   /** Handler that is invoked when the user lifts their pointer up, after initiating a drag. */
   private _pointerUp = () => {
-    if (!this._dragDropRegistry.isDragging(this)) {
+    if (!this._isDragging()) {
       return;
     }