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

【问题标题】：Ionic 2 **panup** and **pandown** event are not workingIonic 2 **panup** 和 **pandown** 事件不起作用
【发布时间】：2017-06-12 20:01:36
【问题描述】：

我正在开发 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();
}

【问题讨论】：

能否添加触发事件的 .ts 页面？
在后来的 Ionic2 版本中似乎有所改变。这曾经有效，但现在 event.center X 和 Y 在平移事件中始终为零，因此无法从我所看到的确切知道平移坐标的最终位置。
我还注意到，如果我收听任何平移事件，如果我在上下平移之前单击并向左或向右平移，它确实将 event.center 坐标设置为正确，但如果我只是单击则永远不会然后立即上下平移。很奇怪。似乎 ionic2 出于某种原因正在吃掉这些事件。

标签： javascript typescript ionic-framework ionic2 hammer.js

【解决方案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。

【讨论】：

仍然不适合我，可能是因为浏览器滚动我不知道。 panup 工作 2 次， pandowe 事件工作 3 次然后停止！！！