Service used to handle drag and drop across multiple components

drag-drop.service.ts

import {Inject, Injectable} from '@angular/core';
import {CdkDragDrop, CdkDragMove, CdkDragRelease, CdkDropList} from "@angular/cdk/drag-drop";
import {DOCUMENT} from "@angular/common";

@Injectable({
  providedIn: 'root'
})
export class DragDropService {
  public readonly DEFAULT_SCOPE = 'default';

  dropLists: {[scope: string]: CdkDropList[]} = {};
  currentHoverDropListId?: string;
  dragData: any | null = null;

  constructor(@Inject(DOCUMENT) private document: Document) {
    this.dropLists[this.DEFAULT_SCOPE] = [];
  }

  public register(dropList: CdkDropList, scope: string = this.DEFAULT_SCOPE) {
    this.dropLists[scope].push(dropList);
  }

  public unregister(dropList: CdkDropList, scope: string = this.DEFAULT_SCOPE) {
    let index = this.dropLists[this.DEFAULT_SCOPE].findIndex(x => x == dropList);
    if(index != -1) {
      this.dropLists[scope].splice(index, 1);
    }
  }

  getDropLists(scope: string = this.DEFAULT_SCOPE): CdkDropList[] {
    return this.dropLists[scope];
  }

  dragMoved(event: CdkDragMove<any>, scope: string = this.DEFAULT_SCOPE) {
    let elementFromPoint = this.document.elementFromPoint(
      event.pointerPosition.x,
      event.pointerPosition.y
    );

    if (!elementFromPoint) {
      this.currentHoverDropListId = undefined;
      return;
    }

    let dropList = elementFromPoint.classList.contains('cdk-drop-list')
      ? elementFromPoint
      : elementFromPoint.closest('.cdk-drop-list');

    if (!dropList) {
      this.currentHoverDropListId = undefined;
      return;
    }

    this.currentHoverDropListId = dropList.id;
    this.dragData = event.source.data;
  }

  dropped(event: CdkDragDrop<any[]>) {
    this.dragData = null;
  }

  dragReleased(event: CdkDragRelease) {
    this.currentHoverDropListId = undefined;
  }
}