Comment implémenter un div draggable dans Angular 2 en utilisant Rx

J'ai essayé d'obtenir un déplaçable div de travail à l'aide Angulaire 2. Je suis en utilisant cet exemple de la angular2-exemples repo comme un point de départ, n'est vraiment réglage du code pour tenir compte de la suppression de la toRx() méthode. Le code fonctionne, mais il ne tient pas compte de mouseout événements. Cela signifie que si je clique sur un Déplaçable div, et déplacez la souris lentementla div se déplace avec la souris. Mais si je bouge la souris trop rapide, un mouseout événement est envoyé à la place d'un mousemove de l'événement, et ce déplacement s'arrête.

Comment puis-je garder le glisser passe après que la souris est déplacée jusqu'à présent qu'un mouseout événement est déclenché? J'ai essayé de fusionner les mouseout flux d'événements avec la mousemovede sorte que, mouseout événements sont traités comme mousemovemais qui ne fonctionne pas.

Je suis en utilisant Angulaire 2.0.0-bêta.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 {
}

source d'informationauteur Chris | 2016-03-29

J'ai trouvé la réponse à cette RxJs Comment traiter avec les événements du document. Le noeud du problème, c'est que les événements de la souris ne sont envoyés à un élément lorsque la souris est sur cet élément. Si nous voulons la mousedown état de cause, limité à l'élément spécifique, mais nous avons à suivre mondiale mousemove et mouseup événements. Voici le nouveau code. Notez l'utilisation de la @HostListener décorateur sur onMouseup et onMousemove spécifie la cible comme document:mouseup et document:mousemove. C'est la façon dont les événements mondiaux sont déversés dans le Rx flux.

La officiel angular2 documentation pour HostListener ne mentionne pas cette target:eventName la syntaxe, mais cette vieille dart de la documentation pour la version 2.0.0-alpha.24 ne le mentionne. Il semble toujours en 2.0.0-bêta.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';
}
});
}
}

Vous pouvez utiliser ceci : npm install ng2draggable

Utilisation [ng2-draggable]="true"n'oubliez pas le ="true"

Vous pouvez le trouver ici

https://github.com/cedvdb/ng2draggable

Voici le code:

@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','');
}
}

1

Vous pouvez créer une grande div qui couvre l'écran de l'immobilier. Pour commencer avec ce div est faible, le z-index de la div vous souhaitez faire glisser. Sur réception de mousedown vous modifiez le z-index de la div à être plus élevé que le glisser-élément et de recevoir de la souris de déplacer les événements sur cette div. Vous pourriez la n de l'utiliser pour calculer la position de la glisser l'élément. Vous pouvez ensuite arrêter et envoyer le div de retour à nouveau lorsque vous recevez une souris.

J'ai récemment écrit un modulaire de glisser et de déposer cadre Angular2. S'il vous plaît donner un essai et fournir de la rétroaction.

https://github.com/ivegotwings/ng2Draggable

Cependant, j'ai arrêter de le faire glisser une fois le mouseout événement est déclenché.

J'ai le même problème avec déplaçable popup, j'ai donc ajouter mousemove et mouseup événements de document sur mousedown, et les supprimer sur mouseup.
J'utilise Eric Martinez répondre pour ajouter et supprimer des écouteur d'événement de façon dynamique.

Modèle:

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

Composant:

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();
}

Voici un exécutable exemple sur Plunker.

Vous devez vous connecter pour publier un commentaire.