0

我想使用 Angular 2+ 使 div 垂直调整大小。它应该像这样工作：如果用户在调整大小元素上 mousedown 并向上/向下移动光标然后 mouseup - div 应该具有适当的高度。

<div #resizable class="resizable">
  <div class="resizer">RESIZE</div>
</div>



export class AppComponent {
  public resizable: ElementRef;
  @ViewChild('resizable') set content(content: ElementRef) {
    if(content) {
      this.resizable = content;
      this.resizable.nativeElement.addEventListener('mousedown', this.resizeMouseDown.bind(this))
      this.resizable.nativeElement.addEventListener('mouseup', this.resizeMouseUp.bind(this))
    }
  }

  public resizeMouseDown() {

  }

  public resizeMouseUp() {
    
  }
}

我认为应该通过在特定情况下添加和删除事件处理程序（mousedown、mouseup、mousemove）来完成。有人可以帮我吗？

堆栈闪电战

4

1 回答 1

1

想象一下，你有一个 .html 之类的

<div class="resizable">
hello
  <div class="cell-border-bottom"></div>
</div>

CSS .cell-border-bottom 是

.cell-border-bottom {
    bottom: -5px;
    left: 5px;
    right: 5px;
    z-index: 10;
    position: absolute;
    background-color: transparent;
    opacity: .5;
    height: 10px;
    cursor: n-resize;
}

如您所见，唯一的条件是 .resizable 类具有位置：相对，例如

.resizable {
    position: relative;
    border:1px solid silver
}

我们可以使用 fromEvent 'rxjs' 操作符来检查鼠标是否按下。如果是mousedown，我们检查我们是否在“div cell-border-bottom”中是mousedown。如果为真，我们使用变量来获取当前位置并使用 fromEvent mouseup 和 fromEvent mousemove。有些喜欢

  alive:boolean=true;
  rectOld: any;
  origin: any;
  moveSubscription: any;
  div: any;
  constructor(@Inject(DOCUMENT) private document: Document) {}
  ngOnInit(): void {
    //we subscribe to "mousedown"
    fromEvent(this.document, "mousedown")
      .pipe(
         //don't forget unsubscribe
         takeWhile(()=>this.alive),

        //we are only interesting if the "class" of element is "cell-border-bottom"
        filter((event: MouseEvent) => {
          const classs = (event.target as any).className;
          if (classs && typeof classs === "string") {
            const className = classs.split(" ");
            return className.length > 0
              ? className.indexOf("cell-border-bottom") >= 0
              : false;
          }
          return false;
        })
      )
      .subscribe((event: MouseEvent) => {
        //get the parent
        this.div = (event.target as any).parentElement;

        //store the dimensions of the "parent"
        this.rectOld = this.div.getBoundingClientRect();

        //and the position of the mouse
        this.origin = { x: event.screenX, y: event.screenY };

        //subscribe to "mouseup"
        fromEvent(document, "mouseup")
          .pipe(take(1))   //when happens one time unsubscribe using take(1)
          .subscribe(() => {
            if (this.moveSubscription) {  //if exist "moveSubscription"
              this.moveSubscription.unsubscribe();  //unsubscribe
              this.moveSubscription = undefined;
            }
          });
        
        //if there' no moveSubscription
        if (!this.moveSubscription && this.div) {
          
          //listen "mousemove"
          this.moveSubscription = fromEvent(this.document,"mousemove")
            .subscribe((moveEvent: MouseEvent) => {

              //calculate the heigth according the position of he mouse
              const incrTop = moveEvent.screenY - this.origin.y;
              const heigth = this.rectOld.height + incrTop;

              //give to "parent the height
              //I put a minimum of 10px
              this.div.style.height = (heigth < 10 ? 10 : heigth) + "px";
            });
        }
      });
  }

  ngOnDestroy(){
    this.alive=false;
  }

你可以在这个 stackblitz中看到

2021-04-15 更新：别忘了退订！

注意：我更新了，变量“onDrag”不是必需的（真的是我做了一段时间的大型项目的简单代码）：angular-desktop

于 2021-04-14T18:44:39.420 回答