檢測到hammer.js事件的方向變化

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>

_{注：這不符合最新的x版本}