угловое cdk перетаскивание + изменение размера - PullRequest
Новая
       39

угловое cdk перетаскивание + изменение размера

0 голосов
/ 08 февраля 2019

у меня есть такой код:

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

директива 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, и теперь мне нужно изменить размер каждого элемента в em, и если он был изменен, его нужно скопировать в новый массив и получить егоиндекс.Но на практике я не могу обработать DragEvent, когда нажимаю «grabber», потому что у него нет cdkDragHandle.Итак, как я могу программно установить это событие на граббер, в котором я не хочу его перетаскивать, просто беру начало / перемещение / конец событий для получения позиций измененных размеров элементов.

И оно может выглядеть так: https://cdn1.savepice.ru/uploads/2019/2/8/0426296ca859446d6a92f569bca34826-full.png

...