Question

我有类似的代码：

hmtl

                <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>

可调整大小的指令

      _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;
  }

抓取指令

    @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的“表”，现在我需要调整'em的每个项目的大小，如果已调整大小，则必须将其复制到新数组中并获取其索引。但是实际上，当我单击“抓取器”时，我无法处理DragEvent，因为它没有cdkDragHandle。因此，我如何以编程方式将该事件设置为不希望拖动的事件，而只是开始/移动/结束事件以获取调整大小后的元素的位置。

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

角度cdk拖放+调整大小

0 个答案: