Ionic-angular Drag Gesture

Ionic Framework ionic-v3
1

Hello I’m trying to create my own PanListener, upon searching I saw drag-gesture.js on ionic-angular/gestures. I already tried to use the gesture.js for my PanListener but I want to detect when the user end or stop dragging the screen.

This is how I do it using drag-gesture.js

import { Directive, ElementRef, OnInit, OnDestroy } from ‘@angular/core’;
import { Platform, DomController } from ‘ionic-angular’;
import { Gesture } from ‘ionic-angular/gestures/gesture’;
import { GestureController, GestureDelegate } from ‘ionic-angular/gestures/gesture-controller’;
import { PanGesture } from ‘ionic-angular/gestures/drag-gesture’;

declare var Hammer: any;

/*
Generated class for the PanListener directive.

See https://angular.io/docs/ts/latest/api/core/index/DirectiveMetadata-class.html
for more info on Angular 2 Directives.
*/
@Directive({
selector: ‘[pan-listener]’ // Attribute selector
})
export class PanListener implements OnInit, OnDestroy{

private el: HTMLElement;
private plt: Platform;
private domCtrl: DomController;
private panGesture: PanGesture;
private gestureCtrl: GestureController;
private gestureDlgt: GestureDelegate;

constructor(el: ElementRef, plt: Platform, domCtrl: DomController, gestureCtrl: GestureController) {
console.log(‘Hello PanListener Directive’);
this.el = el.nativeElement;
this.plt = plt;
this.domCtrl = domCtrl;
this.gestureCtrl = gestureCtrl;
console.log('DomCtrl: ’ + this.domCtrl + ’ ’ + this.gestureCtrl);
}

ngOnInit(){
this.gestureDlgt = this.gestureCtrl.createGesture({
name: ‘drag’,
disableScroll: true
});

let opts: any = {
  threshold: 1,
  direction: 'y',
  domController: this.domCtrl,
  gesture: this.gestureDlgt

}

this.panGesture = new PanGesture(this.plt, this.el, opts);

this.panGesture.listen();

this.panGesture.onDragStart((ev) => {
  console.log('Drag Start');
});

this.panGesture.onDragMove((ev) => {
  console.log('Drag Move');
});

this.panGesture.onDragEnd((ev) => {
  console.log('Drag End');
});

}

ngOnDestroy(){
this.panGesture.destroy();
}

}

It doesn’t work event I put some Options for PanGesture

2

I’m disgusted about this one I didn’t notice that gesture.js have panstart, panend, and panmove events.

For anyone who suffer with this maybe I could help about this here’s my working gesture:

ngOnInit(){
this.panGesture = new Gesture(this.el, {
recognizers: [
[Hammer.Pan, {direction: Hammer.DIRECTION_VERTICAL}]
]
});
this.panGesture.listen();
this.panGesture.on(‘panup’, e => {
this.actionPanUp();
});
this.panGesture.on(‘pandown’, e => {
this.actionPanDown();
});

this.panGesture.on('panstart', e => {
  console.log('panstart');
});

this.panGesture.on('panmove', e => {
  console.log('panmove');
});

this.panGesture.on('panend', e => {
  console.log('panend');
});

}

Thanks for this document: http://hammerjs.github.io/recognizer-pan/