Only swipeone works with jGestures

Question

I am trying to implement touch evens using jGestures. swipeone works fine, but anything else (swipeleft, swiperight, etc.) doesn't work.

<div id="wrap" style="height:500px; width:500px; background: blue;">

    </div>
    <script type="text/javascript">
        $('#wrap').bind('swipeleft', function(){
            alert("test");
        });
    </script>

This is just a test page I did. In fact, it worked in one place in my main project, but it seems to have completely stopped even when I returned to the older version. I tried another version of jGestures with no luck.

Answer 1

SwipeLeft, SwipeRight, -Up and -Down are a little poorly implemented. They only work if you are EXACTLY on the axis where you started the touch event. For example, SwipeRight will only work if your finger moves from (X, Y) (120, 0) to (250, 0).

Y- , .

jGestures.js( 1095) ():

/**
 * U Up, LU LeftUp, RU RightUp, etc.
 * 
 *  \U|U/
 * LU\|/RU
 *L---+---R
 * LD/|\RD
 *  /D|D\
 *
 */
if ( _bHasTouches && _bHasMoved === true && _bHasSwipeGesture===true) {
    _bIsSwipe = true;
    var deltaX = _oDetails.delta[0].lastX;
    var deltaY = _oDetails.delta[0].lastY;
    var hor = ver = '';
    if (deltaX > 0) { // right
        hor = 'right';
        if (deltaY > 0) {
            ver = 'down'
        } else {
            ver = 'up';
        }

        if (Math.abs(deltaY) < deltaX * 0.3) {
            ver = '';
        } else if (Math.abs(deltaY) >= deltaX * 2.2) {
            hor = '';
        }
    } else { // left
        hor = 'left';
        if (deltaY > 0) {
            ver = 'down'
        } else {
            ver = 'up';
        }

        if (Math.abs(deltaY) < Math.abs(deltaX) * 0.3) {
            ver = '';
        } else if (Math.abs(deltaY) > Math.abs(deltaX) * 2.2) {
            hor = '';
        }
    }
    // (_oDetails.delta[0].lastX < 0) -> 'left'
    // (_oDetails.delta[0].lastY > 0) -> 'down'
    // (_oDetails.delta[0].lastY < 0) -> 'up'
    // alert('function swipe_' + hor + '_' + ver);

    _oDetails.type = ['swipe', hor, ver].join('');
    _$element.triggerHandler(_oDetails.type, _oDetails);
}

Answer 2

:

$('#wrap').bind('swipeone', function (event, obj) {
   var direction=obj.description.split(":")[2]
   if(direction=="left"){
        doSomething();
   }
});

Answer 3

:

fooobar.com/questions/1103988/...

:

… .bind('swipeone swiperight', … 

. swiperight . 3 , : D

,  

Answer 4

1326 0.90.1

                if ( _bHasTouches && _bHasMoved === true && _bHasSwipeGesture===true) {
                    _bIsSwipe      = true;
                    _oDetails.type = 'swipe';
                    _vLimit        = $(window).height()/4;
                    _wLimit        = $(window).width()/4;
                    _sMoveY        = _oDetails.delta[0].lastY;
                    _sMoveX        = _oDetails.delta[0].lastX;
                    _sMoveYCompare = _sMoveY.toString().replace('-','');
                    _sMoveXCompare = _sMoveX.toString().replace('-','');

                    if(_sMoveX < 0){
                        if(_oDetails.delta[0].lastY < _vLimit) {
                            if(_sMoveYCompare < _vLimit) {
                                _oDetails.type += 'left';
                            }
                        }
                    }else if(_sMoveX > 0){
                        if(_sMoveYCompare < _vLimit) {
                            _oDetails.type += 'right'
                        }
                    }else{
                        _oDetails.type += '';
                    }

                    if(_sMoveY < 0){
                        if(_sMoveXCompare < _wLimit) {
                            _oDetails.type += 'up'      
                        }
                    }else if(_sMoveY > 0){
                        if(_sMoveXCompare < _wLimit) {
                            _oDetails.type += 'down'
                        }
                    }else{
                        _oDetails.type += '';
                    }
                    // alert(_oDetails.type);
                    _$element.triggerHandler(_oDetails.type, _oDetails);
                }

Answer 5

:

$('#wrap').bind('swipeleftup', function(){
    doSomething();
});

$('#wrap').bind('swipeleftdown', function(){
    doSomething();
});

"swipeleft", , .

Answer 6

, , :

$("#wrap").on('swipeleft swipeleftup swipeleftdown', function(e){
    doSomething();
});

:

$("#wrap").on('swiperight swiperightup swiperightdown', function(e){
    doSomething();
});

on.

Answer 7

Willian El-Turk :

// jGestures http://stackoverflow.com/a/14403116/796538
$('.slides').bind('swipeone', function (event, obj) {
   var direction=obj.description.split(":")[2]
   if (direction=="left"){
        //alert("left");
   } else if (direction=="right"){
        //alert("right");
   }
});

An excellent solution, except that it is executed as soon as the movement from left to right is very sensitive even with a large number of vertical wipes. it would be great to have a minimum travel distance along the x axis. Sort of:

if (direction=="left" && distance>=50px){ 

Also, I'm not sure how ... Please feel free to edit this!

Edit - you can check the distance (x axis) like this, it works for me:

$('.slides').bind('swipeone', function (event, obj) {

    var xMovement = Math.abs(obj.delta[0].lastX);
    var direction=obj.description.split(":")[2]

    //I think 75 treshold is good enough. You can change this.

    if(xMovement >= 75) {
        //continue to event
        //ONLY x axis swipe here. (left-right)

        if (direction=="left"){
            //alert("left");
        } else if (direction=="right"){
            //alert("right");
        }
    }
}