私は Angular 2 を使用してドラッグ可能な div を機能させようとしています。Angular2-examples リポジトリのこの例をtoRx()出発点として使用していますが、メソッドの削除を考慮してコードを実際に調整しているだけです。mouseoutコードは機能しますが、イベントを考慮していません。これは、ドラッグ可能な div をクリックしてマウスをゆっくり動かすと、div がマウスと共に移動することを意味します。しかし、マウスを速く動かしすぎると、mouseoutイベントではなくイベントが送信されmousemove、ドラッグが停止します。
mouseoutイベントが発生するまでマウスを動かした後、ドラッグを継続するにはどうすればよいですか? イベントがイベントと同じように扱われるように、mouseoutイベント ストリームをmousemove1 つにマージしようとしましたが、うまくいきません。mouseoutmousemove
Angular 2.0.0-beta.12 を使用しています。
import {Component, Directive, HostListener, EventEmitter, ElementRef, OnInit} from 'angular2/core';
import {map, merge} from 'rxjs/Rx';
@Directive({
selector: '[draggable]'
})
export class Draggable implements OnInit {
mouseup = new EventEmitter();
mousedown = new EventEmitter();
mousemove = new EventEmitter();
mouseout = new EventEmitter();
@HostListener('mouseup', ['$event'])
onMouseup(event) {
this.mouseup.emit(event);
}
@HostListener('mousedown', ['$event'])
onMousedown(event) {
this.mousedown.emit(event);
return false; // Call preventDefault() on the event
}
@HostListener('mousemove', ['$event'])
onMousemove(event) {
this.mousemove.emit(event);
}
@HostListener('mouseout', ['$event'])
onMouseout(event) {
this.mouseout.emit(event);
return false; // Call preventDefault() on the event
}
constructor(public element: ElementRef) {
this.element.nativeElement.style.position = 'relative';
this.element.nativeElement.style.cursor = 'pointer';
map;
merge;
this.mousedrag = this.mousedown.map(event => {
return {
top: event.clientY - this.element.nativeElement.getBoundingClientRect().top
left: event.clientX - this.element.nativeElement.getBoundingClientRect().left,
};
})
.flatMap(
imageOffset => this.mousemove.merge(this.mouseout).map(pos => ({
top: pos.clientY - imageOffset.top,
left: pos.clientX - imageOffset.left
}))
.takeUntil(this.mouseup)
);
}
ngOnInit() {
this.mousedrag.subscribe({
next: pos => {
this.element.nativeElement.style.top = pos.top + 'px';
this.element.nativeElement.style.left = pos.left + 'px';
}
});
}
}
@Component({
selector: 'my-app',
template: `
<div draggable>
<h1>Hello, World!</h1>
</div>
`,
directives: [Draggable,],
})
export class AppComponent {
}