-
-
Save slmyers/88214760d2565ef355aefec7d018accc to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
interface Position { | |
left:string; | |
top: string; | |
} | |
@Component({ | |
selector: 'drag-demo', | |
template: ` | |
<div #target [ngStyle]="boxPosition | async">drag me</div> | |
` | |
}) | |
class MyComponent { | |
boxPosition: Observable<Position>; | |
@ObserveChild('target', 'mouseup') mouseups:Observable<MouseEvent>; | |
@ObserveChild('target', 'mousedown') mousedowns:Observable<MouseEvent>; | |
@ObserveHost('document','mousemove') mousemoves:Observable<MouseEvent>; | |
ngOnInit(){ | |
//for each mouse down event | |
this.boxPosition = this.mousedowns | |
.flatMap(md => { | |
const startX = md.offsetX, startY = md.offsetY; | |
//start listening to document mousemove events | |
return this.mousemoves.map(mm => { | |
mm.preventDefault(); | |
return { | |
left: mm.clientX - startX + 'px', | |
top: mm.clientY - startY + 'px' | |
} | |
}).takeUntil(this.mouseups); //tear down document mousemove listener upon mouseup | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment