可调整大小仅在顶部拖动和重置按钮

Question

我有一个容器，在容器上方我有一条线，可以在上面拖动。

但根据我的代码拖动顶部不起作用，容器的高度不会增加。

我指的是这个链接 - https://stackblitz.com/edit/ngx-cdk-drag-resize

我希望应该能够将容器拖到顶部，并且容器的高度应该随之增加。

我想创建一个重置按钮 - 单击按钮时，容器应处于其原始状态或高度和宽度。

代码 -

<div [style.height.px]="height"  #resizeBox style="position: relative;">
        <ng-content  ></ng-content>

        <span
        #dragHandleTop
        class="dragHandletop top"
        cdkDrag
        (cdkDragMoved)="dragMove(dragHandleTop, $event)"></span>

    </div>

CSS

.dragHandletop.top {
  height: 2px;
  width: 100%;
  cursor: ns-resize;
}
.dragHandletop {
  position: absolute;
  background-color: palevioletred;
  z-index: 9;
}

Angular Ts 代码 -

  @ViewChild('resizeBox') resizeBox: ElementRef;
  @ViewChild('dragHandleCorner') dragHandleCorner: ElementRef;
  @ViewChild('dragHandleRight') dragHandleRight: ElementRef;
  @ViewChild('dragHandleBottom') dragHandleBottom: ElementRef;

  @ViewChild('dragHandleTop') dragHandleTop: ElementRef;

  drawerHide = false;
  status = false;
  height;

  get resizeBoxElement(): HTMLElement {
    return this.resizeBox.nativeElement;
  }

  get dragHandleCornerElement(): HTMLElement {
    return this.dragHandleCorner.nativeElement;
  }

  get dragHandleRightElement(): HTMLElement {
    return this.dragHandleRight.nativeElement;
  }

  get dragHandleBottomElement(): HTMLElement {
    return this.dragHandleBottom.nativeElement;
  }

  get dragHandleTopElement(): HTMLElement {
    return this.dragHandleTop.nativeElement;
  }

  constructor(private ngZone: NgZone) {}

  ngAfterViewInit() {
    this.setAllHandleTransform();
  }

  setAllHandleTransform() {
    const rect = this.resizeBoxElement.getBoundingClientRect();
    console.log(rect);
    // this.setHandleTransform(this.dragHandleCornerElement, rect, 'both');
    // this.setHandleTransform(this.dragHandleRightElement, rect, 'x');
    // this.setHandleTransform(this.dragHandleBottomElement, rect, 'y');
    this.setHandleTransform(this.dragHandleTopElement, rect, 'y');
  }

  setHandleTransform(
    dragHandle: HTMLElement,
    targetRect: ClientRect | DOMRect,
    position: 'x' | 'y' | 'both'
  ) {
    const dragRect = dragHandle.getBoundingClientRect();

    const translateX = targetRect.width - dragRect.width;
    const translateY = targetRect.height - dragRect.height;

    if (position === 'x') {
      dragHandle.style.transform = `translate(${translateX}px, 0)`;
    }

    if (position === 'y') {
      dragHandle.style.transform = `translate(0, ${translateY}px)`;
    }

    if (position === 'both') {
      dragHandle.style.transform = `translate(${translateX}px, ${translateY}px)`;
    }
  }

  dragMove(dragHandle: HTMLElement, $event: CdkDragMove<any>) {
    this.ngZone.runOutsideAngular(() => {
      this.resize(dragHandle, this.resizeBoxElement);
    });
  }

  resize(dragHandle: HTMLElement, target: HTMLElement) {
    const dragRect = dragHandle.getBoundingClientRect();
    const targetRect = target.getBoundingClientRect();

    const width = dragRect.left - targetRect.left + dragRect.width;
    const height = dragRect.top - targetRect.top + dragRect.height;

    target.style.width = width + 'px';
    target.style.height = height + 'px';

    this.setAllHandleTransform();
  }