fix: allow multiple dragActiveClass

Author: Venipa

projects/angular-draggable-droppable/src/lib/draggable.directive.spec.ts

@@ -887,6 +887,30 @@ describe('draggable directive', () => {
     });
     expect(draggableElement.classList.contains('drag-active')).to.be.false;
   });
+  it('should add and remove multiple drag active class', () => {
+    fixture.componentInstance.dragActiveClass =
+      'drag-active drag-active-secondary';
+    fixture.detectChanges();
+    const draggableElement =
+      fixture.componentInstance.draggableElement.nativeElement;
+    triggerDomEvent('mousedown', draggableElement, {
+      clientX: 5,
+      clientY: 10,
+      button: 0
+    });
+    triggerDomEvent('mousemove', draggableElement, { clientX: 7, clientY: 10 });
+    expect(draggableElement.classList.contains('drag-active')).to.be.true;
+    expect(draggableElement.classList.contains('drag-active-secondary')).to.be
+      .true;
+    triggerDomEvent('mouseup', draggableElement, {
+      clientX: 7,
+      clientY: 8,
+      button: 0
+    });
+    expect(draggableElement.classList.contains('drag-active')).to.be.false;
+    expect(draggableElement.classList.contains('drag-active-secondary')).to.be
+      .false;
+  });
 
   it('should append the ghost element to the given element', () => {
     fixture.componentInstance.ghostElementAppendTo = document.createElement(

projects/angular-draggable-droppable/src/lib/draggable.directive.ts

@@ -368,11 +368,15 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
               }
             }
           );
-
-          this.renderer.addClass(
-            this.element.nativeElement,
+          this.dragActiveClass &&
             this.dragActiveClass
-          );
+              .split(' ')
+              .forEach(_dragActiveClass =>
+                this.renderer.addClass(
+                  this.element.nativeElement,
+                  _dragActiveClass
+                )
+              );
 
           if (this.ghostDragEnabled) {
             const rect = this.element.nativeElement.getBoundingClientRect();
@@ -469,10 +473,15 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
             this.zone.run(() => {
               this.dragEnd.next({ x, y, dragCancelled });
             });
-            this.renderer.removeClass(
-              this.element.nativeElement,
+            this.dragActiveClass &&
               this.dragActiveClass
-            );
+                .split(' ')
+                .forEach(_dragActiveClass =>
+                  this.renderer.removeClass(
+                    this.element.nativeElement,
+                    _dragActiveClass
+                  )
+                );
             currentDrag$.complete();
           });