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

我有一个容器，在容器上方有一条线，通过它可以在顶部拖动

但根据我的代码，拖拽顶部不起作用，容器的高度没有增加

我指的是这个链接-

我想应该能够把容器拖向顶部，容器的高度也会随之增加

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

代码-

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

角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();
  }

@ViewChild（'resizeBox'）resizeBox:ElementRef；
@ViewChild（'dragHandleCorner'）dragHandleCorner:ElementRef；
@ViewChild（'dragHandleRight'）dragHandleRight:ElementRef；
@ViewChild（'dragHandleBottom'）dragHandleBottom:ElementRef；
@ViewChild（'dragHandleTop'）dragHandleTop:ElementRef；
paurerhide=false；
状态=假；
高度；
获取ResizeBox元素（）：HTMLElement{
返回此.resizeBox.nativeElement；
}
获取dragHandleCornerElement（）：HTMLElement{
返回此.dragHandleCorner.nativeElement；
}
获取dragHandleRightElement（）：HTMLElement{
返回此.dragHandleRight.nativeElement；
}
获取dragHandleBottomElement（）：HTMLElement{
返回此.dragHandleBottom.nativeElement；
}
获取DragHandletoElement（）：HTMLElement{
返回此.dragHandleTop.nativeElement；
}
构造函数（专用ngZone:ngZone）{}
ngAfterViewInit（）{
this.setAllHandletTransform（）；
}
setAllHandletTransform（）{
const rect=this.resizeBox元素.getBoundingClientRect（）；
console.log（rect）；
//this.setHandletTransform（this.dragHandleCornerElement，rect，'both'）；
//this.setHandletTransform（this.dragHandleRightElement，rect，'x'）；
//this.setHandletTransform（this.dragHandleBottomElement，rect，'y'）；
this.setHandleTransform（this.dragHandleTopElement，rect，'y'）；
}
setHandleTransform(
dragHandle:HTMLElement，
目标：ClientRect | DOMRect，
位置：“x”|“y”|“两者”
) {
const dragRect=dragHandle.getBoundingClientRect（）；
const translateX=targetect.width-dragRect.width；
const translateY=targetect.height-dragRect.height；
如果（位置=='x'）{
dragHandle.style.transform=`translate（${translateX}px，0）`；
}
如果（位置=='y'）{
dragHandle.style.transform=`translate（0，${translateY}px）`；
}
如果（位置=='两个'）{
dragHandle.style.transform=`translate（${translateX}px，${translateY}px）`；
}
}
dragMove（dragHandle:HTMLElement，$event:cdkdramove）{
此.ngZone.runOutsideAngular（（）=>{
this.resize（dragHandle，this.resizeBox元素）；
});
}
调整大小（dragHandle:HtmleElement，目标：HtmleElement）{
const dragRect=dragHandle.getBoundingClientRect（）；
const targetRect=target.getBoundingClientRect（）；
常量宽度=dragRect.left-targetRect.left+dragRect.width；
常量高度=dragRect.top-targetRect.top+dragRect.height；
target.style.width=宽度+px；
target.style.height=高度+px；
this.setAllHandletTransform（）；
}

  @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();
  }