web-dev-qa-db-ja.com

Rxを使用してAngular 2でドラッグ可能なdivを実装する方法

Angular 2.を使用して、ドラッグ可能なdivを取得しようとしています。私は angular2-examples repo のこの例を使用しています。開始点、toRx()メソッドの削除を考慮してコードを実際に調整するだけです。コードは機能しますが、mouseoutイベントを考慮しません。つまり、Draggableをクリックすると、 div、マウスを移動slowly、divはマウスと共に移動しますが、マウスをあまりにも速く移動すると、mouseoutイベントmousemoveイベントの代わりに送信され、ドラッグが停止します。

mouseoutイベントが発生するまでマウスを移動した後、ドラッグを維持するにはどうすればよいですか？ mouseoutイベントストリームをmousemoveイベントストリームとマージしようとしました。そのため、mouseoutイベントはmousemoveイベントと同様に扱われますが、うまくいきません。

私は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 {
}
angularangular2-directivesrxjs5
18
Chris

これに対する答えは RxJsドキュメントイベントの処理方法 で見つかりました。問題の核心は、マウスがその要素上にあるときにのみマウスイベントが要素に送信されることです。 mousedownイベントを特定の要素に限定したいのですが、globalmousemoveとmouseupイベント。これが新しいコードです。 onMouseupおよびonMousemoveで@HostListenerデコレータを使用すると、ターゲットがdocument:mouseupおよびdocument:mousemoveとして指定されることに注意してください。これは、グローバルイベントがRxストリームにパイプされる方法です。

HostListenerのangular2公式ドキュメント はこのtarget:eventName構文に言及していませんが、 2.0.0-alpha.24のこの古いDartドキュメント には言及しています。 2.0.0-beta.12でも動作するようです。

@Directive({
    selector: '[draggable]'
})
export class Draggable implements OnInit {

    mouseup = new EventEmitter<MouseEvent>();
    mousedown = new EventEmitter<MouseEvent>();
    mousemove = new EventEmitter<MouseEvent>();

    mousedrag: Observable<{top, left}>;

    @HostListener('document:mouseup', ['$event'])
    onMouseup(event: MouseEvent) {
        this.mouseup.emit(event);
    }

    @HostListener('mousedown', ['$event'])
    onMousedown(event: MouseEvent) {
        this.mousedown.emit(event);
        return false; // Call preventDefault() on the event
    }

    @HostListener('document:mousemove', ['$event'])
    onMousemove(event: MouseEvent) {
        this.mousemove.emit(event);
    }

    constructor(public element: ElementRef) {
        this.element.nativeElement.style.position = 'relative';
        this.element.nativeElement.style.cursor = 'pointer';

        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.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';
            }
        });
    }
}
25
Chris

これを使用できます：npm install ng2draggable

[ng2-draggable]="true"を使用します。="true"を忘れないでください

ここで見つけることができます

https://github.com/cedvdb/ng2draggable

コードは次のとおりです。

@Directive({
  selector: '[ng2-draggable]'
})
export class Draggable implements OnInit{
    topStart:number=0;
    leftStart:number=0;
    _allowDrag:boolean = true;
    md:boolean;

    constructor(public element: ElementRef) {}

        ngOnInit(){
          // css changes
          if(this._allowDrag){
            this.element.nativeElement.style.position = 'relative';
            this.element.nativeElement.className += ' cursor-draggable';
          }
        }

        @HostListener('mousedown', ['$event'])
        onMouseDown(event:MouseEvent) {
          if(event.button === 2)
            return; // prevents right click drag, remove his if you don't want it
          this.md = true;
          this.topStart = event.clientY - this.element.nativeElement.style.top.replace('px','');
          this.leftStart = event.clientX - this.element.nativeElement.style.left.replace('px','');
        }

        @HostListener('document:mouseup')
        onMouseUp(event:MouseEvent) {
          this.md = false;
        }

        @HostListener('document:mousemove', ['$event'])
        onMouseMove(event:MouseEvent) {
          if(this.md && this._allowDrag){
            this.element.nativeElement.style.top = (event.clientY - this.topStart) + 'px';
            this.element.nativeElement.style.left = (event.clientX - this.leftStart) + 'px';
          }
        }

        @HostListener('touchstart', ['$event'])
        onTouchStart(event:TouchEvent) {
          this.md = true;
          this.topStart = event.changedTouches[0].clientY - this.element.nativeElement.style.top.replace('px','');
          this.leftStart = event.changedTouches[0].clientX - this.element.nativeElement.style.left.replace('px','');
          event.stopPropagation();
        }

        @HostListener('document:touchend')
        onTouchEnd() {
          this.md = false;
        }

        @HostListener('document:touchmove', ['$event'])
        onTouchMove(event:TouchEvent) {
          if(this.md && this._allowDrag){
            this.element.nativeElement.style.top = ( event.changedTouches[0].clientY - this.topStart ) + 'px';
            this.element.nativeElement.style.left = ( event.changedTouches[0].clientX - this.leftStart ) + 'px';
          }
          event.stopPropagation();
        }

        @Input('ng2-draggable')
        set allowDrag(value:boolean){
          this._allowDrag = value;
          if(this._allowDrag)
            this.element.nativeElement.className += ' cursor-draggable';
          else
            this.element.nativeElement.className = this.element.nativeElement.className
                                                    .replace(' cursor-draggable','');
        }
}
5
Ced

ドラッグ可能なポップアップでも同じ問題があるので、mousemoveおよびmouseupイベントをmousedownでドキュメントに追加し、mouseupで削除します。 Eric Martinez's answer を使用して、イベントリスナーを動的に追加および削除します。

テンプレート：

<div class="popup-win" (mousedown)="mousedown($event)"></div>

成分：

constructor(private elementRef: ElementRef,
        private renderer: Renderer2) {}

mousedown(event: any) {
    this.xStartElementPoint = this.curX;
    this.yStartElementPoint = this.curY;
    this.xStartMousePoint = event.pageX;
    this.yStartMousePoint = event.pageY;
    this.mousemoveEvent = this.renderer.listen("document", "mousemove", this.dragging);
    this.mouseupEvent = this.renderer.listen("document", "mouseup", this.mouseup);
}

dragging(event: any) {
     this.curX = this.xStartElementPoint + (event.pageX - this.xStartMousePoint);
     this.curY = this.yStartElementPoint + (event.pageY - this.yStartMousePoint);
}
mouseup(event: any) {
    // Remove listeners
    this.mousemoveEvent();
    this.mouseupEvent();
}

Plunker の実行可能な例を次に示します。

1
ali-myousefi

画面の領域をカバーする大きなdivを作成できます。このdivで開始するには、ドラッグするdivよりも低いz-indexが必要です。 mousedownを受け取ると、divのz-indexをdrag-elementより高くなるように変更し、このdivでマウス移動イベントを受け取ります。 nはそれを使用して、ドラッグ要素の位置を計算できます。マウスを受け取ったときに、divを停止して再び送信できます。

最近、Angular2でモジュラードラッグアンドドロップフレームワークを作成しました。それを試してみて、フィードバックを提供してください。

https://github.com/ivegotwings/ng2Draggable

ただし、mouseoutイベントが発生したらドラッグを停止します。

1
shiv