在角度可调整大小的 div 中添加拖动答案

【问题标题】：Add dragging in a resizable div in angular在角度可调整大小的 div 中添加拖动
【发布时间】：2022-01-24 12:34:21
【问题描述】：

我有一个可调整大小的 div，我必须在其中保持纵横比。我现在要做的是实现拖动功能。这就是我到目前为止所做的事情

https://stackblitz.com/edit/icon-font-awesome-h3mzgc?file=src/app/app.component.ts

我可以拖动它，我也可以调整它的大小，但效果不是很好。首先，它只在高度和宽度上增长。其次，它不跟随鼠标移动而逐个像素地增长。我尝试将这部分代码用于拖动部分以及调整大小的部分

https://github.com/theideasaler/angular-resizable-draggable/blob/master/src/app/resizable-draggable/resizable-draggable.component.ts

拖拽功能就是这个

dragEvent(event: MouseEvent, status: number) {
    console.log(event, status)
    if(status === 1) {
      event.stopPropagation();
    } else if(status === 2) {
      this.mouseClick = { x: event.clientX, y: event.clientY, left: this.left, top: this.top };
    } else {
      this.loadBox()
    };

    this.status = status;
  }

我尝试过以这种方式使用 mousemove 监听器

@HostListener('window:mousemove', ['$event'])
  onMouseMove(event: MouseEvent){
    this.mouse = { x: event.clientX, y: event.clientY };

    if(this.status === Status.RESIZE) this.resize(event);
    else if(this.status === Status.MOVE) this.move();
  }

  private resize(e){
    if(this.resizeCondMeet()){
      let pageX;
      const diff = isNaN(pageX) ? 1 : e.pageX - pageX;
        const minSize = 10;

        if (
          (this.width + diff < minSize || this.height + diff < minSize) &&
          diff < 0
        ) {
          return;
        }

        this.width = this.width + diff;
        this.height = this.height + diff;

        pageX = e.pageX;
    }
  }

但它不起作用。有人可以帮帮我吗？

【问题讨论】：

标签： angular typescript resize draggable aspect-ratio

【解决方案1】：

解决办法是存储，startDrag时，鼠标的位置和高度

  dragEvent(event: MouseEvent, status: number) {
    if(status === 1) {
      this.init={x:event.pageX,width:this.width,height:this.height}
      event.stopPropagation();
    } else if(status === 2) {
        ....
    }
  }

那么，当移动时使用这个变量

  private resize(e) {
    if (this.resizeCondMeet()) {
      const newWidth = this.init.width + e.pageX - this.init.x;
      const newHeight = this.init.height + e.pageX - this.init.x;
      const minSize = 10;

      if (newWidth < minSize || newHeight < minSize) return;

      this.width = newWidth;
      this.height = newHeight;
    }
  }

【讨论】：