angular - 角cdk拖放+调整大小

Question

我有一个像这样的代码：

<div
    cdkDropList
    id="{{executor.id}}-{{i}}"
    [cdkDropListData]="date.tasks"
    (cdkDropListDropped)="drop($event, date.date, executor)"
    [cdkDropListConnectedTo]="allDropLists"
    class="dropListDate">
  <div
      *ngFor="let item of date.tasks"
      class="drag-me"
      cdkDrag
      (cdkDragEntered)="enterListContainer($event)"
      [cdkDragData]="item"
      resizable>
    <app-plan-task [task]="item" [list]="true" cdkDragHandle></app-plan-task>
    <div class="resize-drag-task" grabber></div>
  </div>
</div>

可调整大小的指令

class Resizable {
  _host: HTMLElement;
  _startWidth = 0;
  constructor(private elm: ElementRef) { }

  ngOnInit() {
    this._host = this.elm.nativeElement;
  }

  dragStart() {
    console.log('START')

    const style = window.getComputedStyle(this._host, undefined);
    this._startWidth = style.width ? parseInt(style.width, 10) : 0;
  }

  dragging(diff: number) {
    this._host.style.width = this._startWidth + diff + 'px';
  }

  dragEnd() {
    console.log('END')
    this._startWidth = 0;
  }
}

抓取指令

class Grabber {

  @HostListener('mousedown', ['$event'])
  mousedown = (e: MouseEvent) => {
    this._startOffsetX = e.clientX;
    document.addEventListener('mousemove', this._boundDragging);
    document.addEventListener('mouseup', this._boundDragEnd);
    this.resizable.dragStart();
  };

  _startOffsetX = 0;

  readonly _boundDragging = (e) => this._dragging(e);

  readonly _boundDragEnd = (e) => this._dragEnd(e);

  constructor(
    private elm: ElementRef,
    @Host() @SkipSelf() private resizable: ResizableDirective
  ) {
  }

  private _dragging(e: MouseEvent) {
    const diff = e.clientX - this._startOffsetX;
    this.resizable.dragging(diff);
  }

  private _dragEnd(e: MouseEvent) {
    this._startOffsetX = 0;
    document.removeEventListener('mousemove', this._boundDragging);
    document.removeEventListener('mouseup', this._boundDragEnd);
    this.resizable.dragEnd();
  }
}

如您所见，我有多个带有垂直 dnd 的“表格”。现在我需要调整每个项目的大小，如果已经调整大小，则必须将其复制到一个新数组并获取它的索引。但实际上，当我单击“抓取器”时，我无法处理 DragEvent，因为它没有 cdkDragHandle。那么我如何以编程方式将此事件设置为我不想拖动它的抓取器，只需使用开始/移动/结束事件来获取调整大小元素的位置。

它可能看起来像： https ://cdn1.savepice.ru/uploads/2019/2/8/0426296ca859446d6a92f569bca34826-full.png

标签： angulardrag-and-dropresizeangular-cdk