feat(dragOverClass): add a class when an element is dragged over it

Author: mattlewis92

demo/demo.component.ts

@@ -10,56 +10,51 @@ import { Component } from '@angular/core';
       I snap to a 100 x 100 grid
     </div>
     <div
-      [class.dropOverActive]="dropOverActive"
       mwlDroppable
-      (dragEnter)="dropOverActive = true"
-      (dragLeave)="dropOverActive = false"
-      (drop)="onDrop($event)">
+      (drop)="onDrop($event)"
+      dragOverClass="dropOverActive">
       <span [hidden]="droppedData">Drop here</span>
       <span [hidden]="!droppedData">Item dropped here with data: "{{ droppedData }}"!</span>
     </div>
   `,
   styles: [
     `
-    [mwlDraggable] {
-      background-color: red;
-      width: 200px;
-      height: 200px;
-      position: relative;
-      z-index: 1;
-      float: left;
-      margin-right: 10px;
-    }
-    [mwlDroppable] {
-      background-color: green;
-      width: 400px;
-      height: 400px;
-      position: relative;
-      top: 50px;
-      left: 100px;
-    }
-    [mwlDraggable],
-    [mwlDroppable] {
-      color: white;
-      text-align: center;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .dropOverActive {
-      border: dashed 1px black;
-      background-color: lightgreen;
-    }
-  `
+      [mwlDraggable] {
+        background-color: red;
+        width: 200px;
+        height: 200px;
+        position: relative;
+        z-index: 1;
+        float: left;
+        margin-right: 10px;
+      }
+      [mwlDroppable] {
+        background-color: green;
+        width: 400px;
+        height: 400px;
+        position: relative;
+        top: 50px;
+        left: 100px;
+      }
+      [mwlDraggable],
+      [mwlDroppable] {
+        color: white;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .dropOverActive {
+        border: dashed 1px black;
+        background-color: lightgreen;
+      }
+    `
   ]
 })
 export class DemoComponent {
-  dropOverActive: boolean = false;
-
   droppedData: string = '';
 
   onDrop({ dropData }: { dropData: any }): void {
-    this.dropOverActive = false;
     this.droppedData = dropData;
     setTimeout(() => {
       this.droppedData = '';

src/droppable.directive.ts

@@ -5,7 +5,9 @@ import {
   OnDestroy,
   Output,
   EventEmitter,
-  NgZone
+  NgZone,
+  Input,
+  Renderer2
 } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 import {
@@ -38,6 +40,11 @@ export interface DropData {
   selector: '[mwlDroppable]'
 })
 export class DroppableDirective implements OnInit, OnDestroy {
+  /**
+   * Added to the element when an element is dragged over it
+   */
+  @Input() dragOverClass: string;
+
   /**
    * Called when a draggable element starts overlapping the element
    */
@@ -63,7 +70,8 @@ export class DroppableDirective implements OnInit, OnDestroy {
   constructor(
     private element: ElementRef,
     private draggableHelper: DraggableHelper,
-    private zone: NgZone
+    private zone: NgZone,
+    private renderer: Renderer2
   ) {}
 
   ngOnInit(): void {
@@ -97,6 +105,10 @@ export class DroppableDirective implements OnInit, OnDestroy {
           .pipe(filter(overlapsNow => overlapsNow))
           .subscribe(() => {
             dragOverActive = true;
+            this.renderer.addClass(
+              this.element.nativeElement,
+              this.dragOverClass
+            );
             this.zone.run(() => {
               this.dragEnter.next({
                 dropData: currentDragDropData
@@ -119,6 +131,10 @@ export class DroppableDirective implements OnInit, OnDestroy {
           )
           .subscribe(() => {
             dragOverActive = false;
+            this.renderer.removeClass(
+              this.element.nativeElement,
+              this.dragOverClass
+            );
             this.zone.run(() => {
               this.dragLeave.next({
                 dropData: currentDragDropData
@@ -129,6 +145,10 @@ export class DroppableDirective implements OnInit, OnDestroy {
         drag.pipe(mergeMap(() => overlaps)).subscribe({
           complete: () => {
             if (dragOverActive) {
+              this.renderer.removeClass(
+                this.element.nativeElement,
+                this.dragOverClass
+              );
               this.zone.run(() => {
                 this.drop.next({
                   dropData: currentDragDropData

test/droppable.directive.spec.ts

@@ -1,51 +1,55 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { expect } from 'chai';
 import * as sinon from 'sinon';
 import { triggerDomEvent } from './util';
 import { DragAndDropModule } from '../src/index';
 import { DraggableDirective } from '../src/draggable.directive';
+import { DroppableDirective } from '../src/droppable.directive';
 
 describe('droppable directive', () => {
   @Component({
     template: `
       <div mwlDraggable [dropData]="dropData">Drag me!</div>
       <div
+        #droppableElement
         mwlDroppable
         (dragEnter)="dragEvent('enter', $event)"
         (dragOver)="dragEvent('over', $event)"
         (dragLeave)="dragEvent('leave', $event)"
-        (drop)="drop($event)">
+        (drop)="drop($event)"
+        [dragOverClass]="dragOverClass">
         Drop here
       </div>
     `,
     styles: [
       `
-      [mwlDraggable] {
-        position: relative;
-        width: 50px;
-        height: 50px;
-        z-index: 1;
-        margin-top: -200px;
-      }
-      [mwlDroppable] {
-        position: relative;
-        top: 100px;
-        left: 0;
-        width: 200px;
-        height: 200px;
-      }
-    `
+        [mwlDraggable] {
+          position: relative;
+          width: 50px;
+          height: 50px;
+          z-index: 1;
+          margin-top: -200px;
+        }
+        [mwlDroppable] {
+          position: relative;
+          top: 100px;
+          left: 0;
+          width: 200px;
+          height: 200px;
+        }
+      `
     ]
   })
   class TestComponent {
-    @ViewChild(DraggableDirective) public draggable: DraggableDirective;
-    public dragEvent: sinon.SinonSpy = sinon.spy();
-    public drop: sinon.SinonSpy = sinon.spy();
-
-    public dropData: {
+    @ViewChild(DraggableDirective) draggable: DraggableDirective;
+    @ViewChild('droppableElement') droppableElement: ElementRef;
+    dragEvent: sinon.SinonSpy = sinon.spy();
+    drop: sinon.SinonSpy = sinon.spy();
+    dropData: {
       foo: 'bar';
     };
+    dragOverClass: string;
   }
 
   beforeEach(() => {
@@ -152,4 +156,23 @@ describe('droppable directive', () => {
       { dropData: { foo: 'bar' } }
     ]);
   });
+
+  it('should add a class to the droppable element when an element is dragged over it', () => {
+    fixture.componentInstance.dragOverClass = 'drag-over';
+    fixture.detectChanges();
+    const draggableElement: HTMLElement =
+      fixture.componentInstance.draggable.element.nativeElement;
+    const droppableElement: HTMLElement =
+      fixture.componentInstance.droppableElement.nativeElement;
+    expect(droppableElement.classList.contains('drag-over')).to.be.false;
+    triggerDomEvent('mousedown', draggableElement, { clientX: 5, clientY: 10 });
+    expect(droppableElement.classList.contains('drag-over')).to.be.false;
+    triggerDomEvent('mousemove', draggableElement, {
+      clientX: 5,
+      clientY: 100
+    });
+    expect(droppableElement.classList.contains('drag-over')).to.be.true;
+    triggerDomEvent('mouseup', draggableElement, { clientX: 5, clientY: 120 });
+    expect(droppableElement.classList.contains('drag-over')).to.be.false;
+  });
 });