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

Question

我正在从事 Ionic 2 项目，我想实现拖放功能。为此，我在 Ionic 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 的 token ，它接受 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 .