How can a draggable vertical bar be created with Angular2? Setting isDragging to true when the user clicks it and calling moveHandler when the mouse moves seems straightforward, but there are a couple of issues:
- When the if-condition in
ngOnInitis true, "dragging" is never printed. - When the if-condition in
ngOnIntis false, "dragging" is printed after the mouse is released.
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'my-app',
template: ` <div id="handler_vertical" (mousedown)="startDragging()"></div> `
})
export class AppComponent implements OnInit {
isDragging = false;
width = 0;
startDragging() {
console.log("start dragging");
this.isDragging = true;
}
dragHanlder(event: MouseEvent) {
if (this.isDragging) {
console.log("dragging");
this.width -= event.movementX;
// console.log("movementX:"+ event.movementX);
}
}
stopDragging() {
console.log("stop dragging");
this.isDragging = false;
}
ngOnInit() {
window.onmouseup = this.stopDragging;
if(false){
window.onmousemove = this.dragHanlder;
}else{
window.onmousemove = (event) => {
console.log("moving");
this.dragHanlder(event);
}
}
}
}