有没有办法使用角度材料拖放来调整大小

Question

我正在使用 Angular 和 Material 创建一个 Web 应用程序，我希望能够拖放和调整我的部分的大小。有没有办法使用 Angular Material 拖放 CDK 来完成？

Answer 1

如果您正在寻找

"non-third-party dependent"

解决方案，那么以下是最好的。

以下内容已针对 Angular 9 进行了测试。

原始示例

民间版本（与上面相同，以防原件被删除）

HTML

<div #resizeBox class="container" style="position: relative;" [style.width.px]="width"
  [style.height.px]="height">
  <span #dragHandleCorner [cdkDragLockAxis]="lockAxis" class="dragHandle corner" cdkDrag (cdkDragMoved)="dragMove(dragHandleCorner, $event)"></span>
  <span #dragHandleRight cdkDragLockAxis="x" class="dragHandle right" cdkDrag (cdkDragMoved)="dragMove(dragHandleRight, $event)"></span>
  <span #dragHandleBottom cdkDragLockAxis="y" class="dragHandle bottom" cdkDrag (cdkDragMoved)="dragMove(dragHandleBottom, $event)"></span>
  <span class="full" style="width: 100%;">Hello World!</span>
</div>

组件.ts

import { CdkDragMove } from '@angular/cdk/drag-drop';
import { AfterViewInit, Component, ElementRef, NgZone, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  @ViewChild('resizeBox') resizeBox: ElementRef;
  @ViewChild('dragHandleCorner') dragHandleCorner: ElementRef;
  @ViewChild('dragHandleRight') dragHandleRight: ElementRef;
  @ViewChild('dragHandleBottom') dragHandleBottom: ElementRef;



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

  constructor(private ngZone: NgZone) {}

  ngAfterViewInit() {
    this.setAllHandleTransform();
  }

  setAllHandleTransform() {
    const rect = this.resizeBoxElement.getBoundingClientRect();
    this.setHandleTransform(this.dragHandleCornerElement, rect, 'both');
    this.setHandleTransform(this.dragHandleRightElement, rect, 'x');
    this.setHandleTransform(this.dragHandleBottomElement, 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 = `translate3d(${translateX}px, 0, 0)`;
    }

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

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

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

CSS

.container {
  position: relative;
  background-color: gray;
}

.full {
  width: 100%;
  background: yellow;
}

.dragHandle {
  position: absolute;
  background-color: red;
}

.dragHandle.corner {
  width: 15px;
  height: 15px;
  cursor: nwse-resize;
}

.dragHandle.right {
  width: 2px;
  height: 100%;
  cursor: ew-resize;
}

.dragHandle.bottom {
  height: 2px;
  width: 100%;
  cursor: ns-resize;
}

希望这对某人有帮助:)

谢谢。

Answer 2

调整窗口大小：(JQlite)

 angular.element($window).triggerHandler('resize');

Answer 3

对于任何仍然感兴趣的人，我的解决方法是在角度文档中示例的类示例框中使用垫卡https://material.angular.io/cdk/drag-drop/overview。然后我在 mat-card 的样式上使用调整大小，并且还使用带有 grid-container 类的 div 标签作为盒子的容器。这已在 Angular v14 中进行了测试：

.grid-container {
  display: flex;
  min-width: auto;
  max-width: auto;
  align-items: center;
  text-align: center;
  background-color: #575151; 
}
.custom-card{
  display: flex
  flex-wrap: wrap; 
  overflow: auto;
  resize: both;
}
.example-box {
  border: solid 1px #ccc;
  font-size: 30pt;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87);
  cursor: grab;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.example-box:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

<div class="grid-container">
  <div class="example-box" cdkDrag>
    <mat-card class="custom-card">
      <mat-card-content>
        Drag me around</mat-card-content>
        </mat-card>
  </div>
</div>