Geek asks and answers

Detect direction change at hammer.js event

I am dragging an element with hammer.js, and I am looking for a way to distinguish how rage happens.

In general, I use

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

But it deltaXrefers to the beginning of the drag, so when I change the way while dragging, I don’t know.

in any way get an immediate change of direction?

+3
source share
2 answers

you can use

evt.gesture.direction

Possible values: left / right / up / down check out the demo here: http://eightmedia.imtqy.com/hammer.js/examples/events.html

0
source

, 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>
Hide result

: 2.x

0

More articles:


All Articles