使元素在角度2中可调整大小 [英] Make element resizable in angular 2

问题描述

我想使用Angular 2+使div垂直调整大小.它应该是这样的:如果用户将鼠标移至调整大小元素上，然后将光标向上/向下移动，然后再将鼠标向上移动-div应该具有适当的高度.

I want to make div vertically resizable using Angular 2+. It should works like this: if user mousedown on resizer element and move cursor up/down and then mouseup - the div should have appropriate height.

<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)来完成.有人可以帮我吗?

I think it should be done by adding and removing event handlers (mousedown, mouseup, mousemove) in specific situation. Could anyone help me, please?

Stackblitz

推荐答案

假设您有一个类似.html的

Imagine you has an .html like

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

css .cell-border-bottom是

The css .cell-border-bottom is

.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类具有position:relative，例如.

As you can see the only condition is that the class .resizable has position:relative,e.g.

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

我们可以使用fromEvent'rxjs'运算符来检查是否按下鼠标.如果为mousedown，则检查是否在"div cell-border-bottom"中为mousedown.如果为true，则使用变量获取当前位置，并使用fromEvent mouseup和fromEvent mousemove.像

We can use fromEvent 'rxjs' operator, to check if mousedown. If is mousedown, we check if we are mousedown in the "div cell-border-bottom". if true we use variables to get the current position and use fromEvent mouseup and fromEvent mousemove. Some like

  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 :别忘了退订！

updated 2021-04-15: don't forget unsubscribe!

注意:我更新了变量"onDrag"，并不是必需的(确实是我花了一段时间的大对象的简单代码): angular-desktop

NOTE: I updated, the variable "onDrag" is not necesary (really is a simplifly code of a large proyect I made some time along): angular-desktop

这篇关于使元素在角度2中可调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！