使元素在角度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?
推荐答案
假设您有一个类似.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屋!