Блог

У меня есть контейнер, поверх контейнера у меня есть строка, по которой перетаскиваем сверху.

но, согласно моему коду, перетаскивание сверху не работает, высота контейнера не увеличивается.

я ссылаюсь на эту ссылку — 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;
}
 

Угловой Код 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();
  }