Testing changing of tab order

src/app/common/directives/dnd.directive.ts

@@ -10,6 +10,7 @@ import {
 import { NewtonFile } from '../types/file.type';
 
 
+
 @Directive({
     selector: '[dropzone]'
 })
@@ -17,21 +18,24 @@ export class DndDirective {
     @HostBinding('class.fileover') fileOver!: boolean;
     @Output() fileDropped = new EventEmitter<any>();
 
-    @HostListener('dragover', ['$event']) onDragOver(evt: any) {
+    @HostListener('dragover', ['$event'])
+    onDragOver(evt: any) {
         evt.preventDefault();
         evt.stopPropagation();
 
         this.fileOver = true;
     }
 
-    @HostListener('dragleave', ['$event']) public onDragLeave(evt: any) {
+    @HostListener('dragleave', ['$event'])
+    public onDragLeave(evt: any) {
         evt.preventDefault();
         evt.stopPropagation();
 
         this.fileOver = false;
     }
 
-    @HostListener('drop', ['$event']) public ondrop(evt: any) {
+    @HostListener('drop', ['$event'])
+    publicondrop(evt: any) {
         evt.preventDefault();
         evt.stopPropagation();
 

src/app/common/directives/draggable.directive.ts

@@ -0,0 +1,48 @@
+import {
+    Directive,
+    Output,
+    EventEmitter,
+    HostListener
+} from '@angular/core';
+
+
+
+@Directive({
+    selector: '[draggable-item]'
+})
+export class DraggableDirective {
+    @Output() dragStart = new EventEmitter<PointerEvent>();
+    @Output() dragMove  = new EventEmitter<PointerEvent>();
+    @Output() dragEnd   = new EventEmitter<PointerEvent>();
+
+    private dragging    = false;
+    selected: any;
+    
+
+    @HostListener('pointerdown', ['$event'])
+    onPointerDown(event: PointerEvent): void {
+        console.log("pointerdown");
+
+        this.dragStart.emit(event);
+    }
+
+    @HostListener('document:pointermove', ['$event'])
+    onPointerMove(event: PointerEvent): void {
+        if (!this.dragging) return;
+        console.log("pointermove");
+
+        this.dragging = true;
+        this.dragMove.emit(event);
+    }
+
+    @HostListener('document:pointerup', ['$event'])
+    onPointerUp(event: PointerEvent): void {
+        if (!this.dragging) return;
+
+        console.log("pointerup");
+
+        this.dragging = false;
+        this.dragEnd.emit(event);
+    }
+
+}