我想使用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中可调整大小
发布评论