Ionic 2 ** panup **和** pandown **事件不起作用

Question

我正在研究Ionic 2項目，我想實現拖放功能。對於這一點，我用波紋管事件離子2

<div (press) = "onDragInit(item, $event)" 
     (panstart)="dragStart($event)" 
     (panup)="onDrag($event)" 
     (pandown)="onDrag($event)" 
     (panend)="onDragEnd($event)" 
     (pressup)="pressUpEvent($event)"> 
</div> 

問題是panup和pandown事件並不是第一次合作。

如果我們先做了水平移動，那麼這兩個事件都可以正常工作。 但是，如果我們先做了垂直移動，那麼這兩個事件在進行水平移動之前都不起作用。 有沒有人遇到過這個問題？

這是我的.ts文件

public onDragInit(doc, event): void { 
    if(!doc.isSelected){ 
     return; 
    } 

    // hide selected docs when start the drag 
    this.docs.forEach((doc: any) => { 
     if(doc.isSelected){ 
      doc.dragging = true; 
      this.draggingDocs.push(doc); 
     }else{ 
      doc.dragging = false; 
     } 
    }); 
    this.dragPoint = this.getDragPoint(event.center.x, event.center.y); 
    this.docDragging = true; 
    this.destination = this.getDroppableDoc(event.center.x,event.center.y); 

    event.preventDefault() 
} 

public dragStart(event: any): void { 
    if(!this.docDragging){ 
     return ; 
    } 
    event.preventDefault(); 
} 

public onDrag(event: any):void { 
    if(!this.docDragging){ 
     return ; 
    } 

    this.dragPoint = this.getDragPoint(event.center.x, event.center.y); 
    let placeForDrop = this.getDroppableCar(event.center.x, event.center.y); 
    if(placeForDrop != null && placeForDrop.doc != null){ 
     this.destination = placeForDrop; 
    } 

    event.preventDefault(); 
} 

public onDragEnd(event: any): void { 
    if(this.destination && this.destination.doc){ 
     this.onDrop.emit({draggingDocs: this.draggingDocs,destination: this.destination}); 
    } 

    this.cancelDragging(); 
    event.preventDefault(); 
} 

public pressUpEvent(event: any): void { 
    this.cancelDragging(); 
    event.preventDefault(); 
} 

Answer 1

我找到了一個解決方案。 Angular 2提供了一個名爲HAMMER_GESTURE_CONFIG的標記，它接受一個HammerGestureConfig類型。

以最簡單的方式，我們可以像這樣擴展HammerGestureConfig。

//覆蓋默認的hammer.js設置。

import { HammerGestureConfig } from "@angular/platform-browser"; 

export class MCrewHammerConfig extends HammerGestureConfig { 
    public overrides = { 
    "pan": { direction: 30 }, 
    "press": { time: 300 } 
    }; 
} 

並將其添加到提供者。

providers: [ 
    { provide: HAMMER_GESTURE_CONFIG, useClass: MCrewHammerConfig }, 
    ] 

瞭解更多詳情angular-2-events。