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

【问题标题】：Detect the direction change on hammer.js event检测hammer.js事件的方向变化
【发布时间】：2014-02-20 10:54:28
【问题描述】：

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

我一般都在用

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

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

有什么方法可以立即改变方向？

【问题讨论】：

想知道答案是否有帮助...

标签： javascript jquery html drag-and-drop hammer.js

【解决方案1】：

您可以通过将最后一个事件和当前事件的中心值传递给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 版本}

【讨论】：

【解决方案2】：

你可以使用

evt.gesture.direction

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

【讨论】：

方向有同样的问题，即使我开始向左拖动也显示正确。还有其他想法吗？
你在使用触摸事件吗？如果是这样，我们就无法知道方向。只有在拖动事件之后我们才能知道方向。只听dragleft 和dragright 事件可能会更好。 varhammertime = Hammer(element).on("dragleft dragright", function(event) { alert('hello!'); });
不适合我。有同样的问题。只有当我通过原点时，事件才会改变。还有其他想法吗？
你能发布任何你想要做什么的屏幕截图或插图吗？它可以帮助我们提供更好的答案。
想想拖球，只是想在他改变方向时接住。最后我用一个额外的变量来保存旧的 X，然后我计算了 deltaX。

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

【讨论】：