イオン2 ** panup **と** pandown **イベントは、私はイオン2プロジェクトに取り組んでいると私はドラッグを実装し、機能をドロップしたい

Question

に動作していません。そのために、私はこの問題は、panupとイベントは初めてのために働いていないpandownある

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

イオン2で怒鳴るイベントを使用しました。

私たちがを実行した場合、水平移動が最初に両方のイベントが正常に動作しています。 しかし、最初に垂直移動を行った場合、水平移動を行うまで、両方のイベントは機能しません。 誰もこの問題に直面していますか？

これは、私は、このための解決策を見つけた私の.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

です。角2は、HammerGestureConfig型を受け入れるHAMMER_GESTURE_CONFIGというトークンを提供します。最も簡単な方法で

、我々はこのよう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です。