feat: drag drop directive

projects/ngx-explorer/src/lib/directives/drag-drop.directive.spec.ts

@@ -0,0 +1,8 @@
+import { DragDropDirective } from './drag-drop.directive';
+
+describe('DragDropDirective', () => {
+  it('should create an instance', () => {
+    const directive = new DragDropDirective();
+    expect(directive).toBeTruthy();
+  });
+});

projects/ngx-explorer/src/lib/directives/drag-drop.directive.ts

@@ -0,0 +1,42 @@
+import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
+
+@Directive({
+  selector: '[nxeDragDrop]'
+})
+export class DragDropDirective {
+  @Output() dragEnter = new EventEmitter<any>();
+  @Output() dragOver = new EventEmitter<any>();
+  @Output() dragLeave = new EventEmitter<any>();
+  @Output() dragDropped = new EventEmitter<any>();
+
+  @HostListener('dragenter', ['$event'])
+  public onDragEnter(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.dragEnter.emit(event);
+  }
+
+  @HostListener('dragover', ['$event'])
+  public onDragOver(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.dragOver.emit(event);
+  }
+
+  @HostListener('dragleave', ['$event'])
+  public onDragLeave(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.dragLeave.emit(event);
+  }
+
+  @HostListener('dragdrop', ['$event'])
+  public onDrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    const files = event.dataTransfer.files;
+    if (files.length > 0) {
+      this.dragDropped.emit(files);
+    }
+  }
+}

projects/ngx-explorer/src/lib/ngx-explorer.module.ts

@@ -9,6 +9,7 @@ import { SecondMenuBarComponent } from './components/second-menu-bar/second-menu
 import { ViewSwitcherComponent } from './components/view-switcher/view-switcher.component';
 import { TreeComponent } from './components/tree/tree.component';
 import { FilterComponent } from './components/filter/filter.component';
+import { DragDropDirective } from './directives/drag-drop.directive';
 
 @NgModule({
   declarations: [
@@ -21,6 +22,7 @@ import { FilterComponent } from './components/filter/filter.component';
     ViewSwitcherComponent,
     TreeComponent,
     FilterComponent,
+    DragDropDirective,
   ],
   imports: [
     CommonModule

projects/ngx-explorer/src/public-api.ts

@@ -20,3 +20,4 @@ export * from './lib/components/tree/tree.component';
 export * from './lib/components/list/list.component';
 export * from './lib/components/filter/filter.component';
 export * from './lib/shared/utils';
+export * from './lib/directives/drag-drop.directive';