Как добавить управление перетаскиванием событием касания в Angular 8/9 без других пакетов или с помощью Hammer JS или Material / Cdk?

Question

Как добавить элемент управления для перетаскивания касанием, который запускает функцию: dragStart ', а затем для выпуска, запускающего функцию:' dragStop '?

Я новичок в Angular. Я создал минимальное изолированное приложение ( на Stackblitz ), чтобы решить эту проблему, к которому я хотел бы добавить возможность сенсорного управления, я прочитал несколько уроков о «hammer js» и «@ angular /». cdk / drag-drop ', но пока ни одна попытка не была успешной.

Идея состоит в том, чтобы иметь возможность изменить место, где находится окно событие перетаскивания нажатием.

---

Это мой код без сенсорного управления:

HTML шаблон для компонента "приложение" ./app.component.html

<div class="outerBox Flex_Fill">
  <div [style.flexDirection]="flex.flow.rev ? flex.show[1] ? 'row-reverse' : 'row' : flex.show[0] ? 'row' : flex.show[1] ? 'row-reverse' : 'row'" [style.height.px]="flex.size.nav" [style.minHeight.px]="flex.size.nav" [style.maxHeight.px]="flex.size.nav" class="toolBar">
    <button (click)="changeFlexShow(0)">Panel 1: {{flex.show[0] ? '✔️' : '❌'}}</button>
    <button (click)="changeFlexFlow()" *ngIf="(flex.show[0] && flex.show[1])">Turn: {{!flex.flow.col ? !flex.flow.rev ? 0 : 180 : !flex.flow.rev ? 90 : 270}}°</button>
    <button (click)="changeFlexShow(1)">Panel 2: {{flex.show[1] ? '✔️' : '❌'}}</button>
  </div>
  <div [style.flexDirection]="!flex.flow.col ? !flex.flow.rev ? 'row' : 'row-reverse' : !flex.flow.rev ? 'column' : 'column-reverse'" *ngIf="(flex.show[0] || flex.show[1])" class="Flex_Fill innerBox">
    <div [style.height.px]="setSizes2style(true, 0)" [style.width.px]="setSizes2style(false, 0)" *ngIf="flex.show[0]" class="panel-1">Panel 1</div>    
    <div [style.height.px]="flex.flow.col ? flex.size.cut : flex.size.box.h" [style.width.px]="flex.flow.col ? flex.size.box.w : flex.size.cut" (dragstart)="onDrag4cutStart($event)" (dragend)="onDrag4cutEnd($event)" *ngIf="(flex.show[0] && flex.show[1])" [ngClass]="{'split-row': !flex.flow.col,'split-col': flex.flow.col}" class="split" draggable="true"></div>
    <div [style.height.px]="setSizes2style(true, 1)" [style.width.px]="setSizes2style(false, 1)" *ngIf="flex.show[1]" class="panel-2">Panel 2</div>
  </div>
</div>

Класс TypeScript для компонента "приложение" ./app.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  host: { "(window:resize)": "changeFlexSizeBox($event)" }
})
export class AppComponent implements OnInit {
  half = { diff: { x: 0, y: 0} };
  flex = { size: { nav: 50, cut: 6, box: { h: 0, w: 0 }, row: { h: 0, w: [0, 0] }, col: { h: [0, 0], w: 0 } }, diff: { w: 0, h: 0}, show: [ true, true ], flow: { col: false, rev: false } };

  ngOnInit() {
    this.flex.size.box = { h: window.innerHeight - this.flex.size.nav, w: window.innerWidth };
    this.flex.size.row = { h: this.flex.size.box.h, w: [ (this.flex.size.box.w - this.flex.size.cut) / 2, this.flex.size.box.w - this.flex.size.cut - (this.flex.size.box.w - this.flex.size.cut) / 2 ] };
    this.flex.size.col = { h: [ (this.flex.size.box.h - this.flex.size.cut) / 2, this.flex.size.box.h - this.flex.size.cut - (this.flex.size.box.h - this.flex.size.cut) / 2 ], w: this.flex.size.box.w };
  }
  onDrag4cutStart(event: DragEvent) {
    this.changeFlexSizeCut(0, event);
  }
  onDrag4cutEnd(event: DragEvent) {
    this.changeFlexSizeCut(1, event);
  }
  setSizes2style(isColumn, i) {
    if ( ( isColumn && this.flex.show[0] && this.flex.show[1] && !this.flex.flow.col ) || ( isColumn && ( !this.flex.show[0] || !this.flex.show[1] ) ) ) {
      return this.flex.size.row.h;
    } else if ( ( !isColumn && this.flex.show[0] && this.flex.show[1] && this.flex.flow.col ) || ( !isColumn && ( !this.flex.show[0] || !this.flex.show[1] ) ) ) {
      return this.flex.size.box.w;
    } else if ( isColumn && this.flex.show[0] && this.flex.show[1] && this.flex.flow.col ) {
      return this.flex.size.col.h[i];
    } else if ( !isColumn && this.flex.show[0] && this.flex.show[1] && !this.flex.flow.col ) {
      return this.flex.size.row.w[i];
    } 
  }
  changeFlexShow(i) {
    this.flex.show[i] = !this.flex.show[i];
  }
  changeFlexFlow() {
    if ( ( !this.flex.flow.col && !this.flex.flow.rev ) || ( !this.flex.flow.col && this.flex.flow.rev ) ) {
      this.flex.flow.col = !this.flex.flow.col;
    } else if ( ( this.flex.flow.col && !this.flex.flow.rev ) || ( this.flex.flow.col && this.flex.flow.rev ) ) {
      this.flex.flow.col = !this.flex.flow.col;
      this.flex.flow.rev = !this.flex.flow.rev;
    }
  }
  changeFlexSizeCut(i, ev) {
    if (i === 0) {
      this.flex.diff.w = this.flex.flow.col ? 0 : ev.x * -1;
      this.flex.diff.h = this.flex.flow.col ? ev.y * -1 : 0;
    } else if (i === 1) {
      this.flex.diff.w += this.flex.flow.col ? 0 : ev.x;
      this.flex.diff.h += this.flex.flow.col ? ev.y : 0;
      if (!this.flex.flow.rev) {
        this.flex.size.row.w[0] += this.flex.diff.w;
        this.flex.size.row.w[1] -= this.flex.diff.w;
        this.flex.size.col.h[0] += this.flex.diff.h;
        this.flex.size.col.h[1] -= this.flex.diff.h;
      } else {
        this.flex.size.row.w[0] -= this.flex.diff.w;
        this.flex.size.row.w[1] += this.flex.diff.w;
        this.flex.size.col.h[0] -= this.flex.diff.h;
        this.flex.size.col.h[1] += this.flex.diff.h;
      }
    }
  }
  changeFlexSizeBox(event) {
    this.flex.size.row.h += window.innerHeight - this.flex.size.nav - this.flex.size.box.h;
    this.flex.size.row.w[0] += ( window.innerWidth - this.flex.size.box.w ) / 2;
    this.flex.size.row.w[1] += ( window.innerWidth - this.flex.size.box.w ) / 2;
    this.flex.size.col.h[0] += ( window.innerHeight - this.flex.size.nav - this.flex.size.box.h ) / 2;
    this.flex.size.col.h[1] += ( window.innerHeight - this.flex.size.nav - this.flex.size.box.h ) / 2;
    this.flex.size.col.w += window.innerWidth - this.flex.size.box.w;
    this.flex.size.box.h += window.innerHeight - this.flex.size.nav - this.flex.size.box.h;
    this.flex.size.box.w += window.innerWidth - this.flex.size.box.w;
  }
}

Остальная часть кода (весь код) находится здесь: https://stackblitz.com/edit/angular-spliter-resize-flex-touch

---

Я просмотрел много разных учебных пособий, но почему-то я не нашел никакой пользы для этой проблемы. Можно ли сделать это с помощью встроенного Angular hammer js или извлечь какую-нибудь директиву из @ material / cdk? (Я нашел использование молотка js ({ ссылка }), но я не смог преобразовать его для этой проблемы)