Question

我正在使用hammer.js拖动一个元素，我正在寻找一种方法来区分愤怒的方式。

一般情况下，我正在使用

evt.gesture.deltaX>0 //right
evt.gesture.deltaX<0 //left

但是deltaX指的是拖动开始，所以当我在拖动过程中改变方式时，我不知道。

任何方式立即改变方向？

Answer 1

你可以使用

evt.gesture.direction

可能的值是左/右/上/下在这里查看演示：http://eightmedia.github.io/hammer.js/examples/events.html

Answer 2

您可以通过将最后一个事件和当前事件的中心值传递给Hammer.utils.getDirection()实用程序方法来确定拖动过程中的正确方向，如下所示：

var el = document.getElementById('sandbox');
var output = document.getElementById('output');
var lastCenter;

function onDrag(ev){
    var center = ev.gesture.center;
    if (lastCenter)
        /* use the built in direction determination of hammer
       but use the last position instead of the starting position */
        output.innerHTML = Hammer.utils.getDirection(lastCenter, center);
    lastCenter = center;
}

function onRelease(){
    lastCenter = null;
}

var hammertime = Hammer(el);
hammertime.on("drag", onDrag);
hammertime.on("release", onRelease);

#sandbox
{
    width: 100%;
    height: 150px;
    line-height:150px;
    text-align:center;
    color:#fff;
    background-color: #29A3CC;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>
<div id="sandbox">Drag the mouse here</div> 
<div id="output"></div>

_{注意：这不适用于最新的2.x版本}

Answer 3

由于这个问题已经 7 岁了，但尚未得到解答，现在 (hammer 2.0.8) 您可以在每个方向上收听不同的事件。例如：

  private hammerManager: HammerManager | null = null;

  private onRefSet(node: HTMLDivElement | null) {
    if (!node || this.hammerManager) { return; }
    this.hammerManager = new Hammer(node);
    this.hammerManager.get('swipe').set({
      direction: Hammer.DIRECTION_ALL,
    });
    this.hammerManager.on('swipeleft', e => {
      console.log(e);
    });
    this.hammerManager.on('swiperight', e => {
      console.log(e);
    });
  }

文档中的更多信息 https://hammerjs.github.io/recognizer-swipe/

（我写的例子使用了 "@types/hammerjs": "^2.0.40"）

检测hammer.js事件的方向变化

3 个答案: