Как использовать jquery swipe без какой-либо библиотеки?

Мне нужно создать jQuery для мобильных устройств, таких как жесты Swipe $("#slider ul li div").swipeleft();, с использованием ядра jQuery без использования каких-либо библиотек или плагинов, даже для мобильных устройств jQuery.

Я знаю, что мобильные виджеты jQuery теперь будут отделены друг от друга, чтобы мы могли использовать только свайпы. Но я не могу ждать так долго.

Мне нужен некоторый ручной код jQuery, похожий на жесты смахивания для функций смахивания влево и вправо. Я видел это, но не мог понять, как получить от него жесты смахивания. Может ли кто-нибудь помочь мне с этим кодом?


person vignesh    schedule 17.11.2012    source источник
comment
Вы можете посмотреть здесь, чтобы понять, как это делает команда jQuery-mobile: github.com/jquery/jquery-mobile/blob/master/js/events/touch.js   -  person andlrc    schedule 17.11.2012
comment
И я думаю, что первоначальный создатель jQuery-мобильных событий: benalman.com/news /2010/03/jquery-специальные-события   -  person andlrc    schedule 17.11.2012


Ответы (1)


Это код для сенсорного смахивания с использованием javascript. В конце концов, мне было трудно искать по всему Интернету. Спасибо padilicious. Ниже приведен HTML-код слайдера.

<div id="slider" ontouchstart="touchStart(event,'slider');" ontouchend="touchEnd(event);" 
ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">
<ul id="slideul"><li><img src="1.jpg"></li><li>....</ul>
</div>

Ниже приведен код javascript для сенсорного смахивания. Это немного долго. Но это работает для меня. Вам не нужно ничего менять. Единственное место, которое вам нужно изменить, это функция processingRoutine(). Я вызвал 2 функции слайда, то есть предыдущий и следующий, используя этот код sliders.goToNext() и sliders.goToPrev(). Вы можете изменить, как вы хотите..

var triggerElementID = null; // this variable is used to identity the triggering element
var fingerCount = 0;
var startX = 0;
var startY = 0;
var curX = 0;
var curY = 0;
var deltaX = 0;
var deltaY = 0;
var horzDiff = 0;
var vertDiff = 0;
var minLength = 72; // the shortest distance the user may swipe
var swipeLength = 0;
var swipeAngle = null;
var swipeDirection = null;

// The 4 Touch Event Handlers

// NOTE: the touchStart handler should also receive the ID of the triggering element
// make sure its ID is passed in the event call placed in the element declaration, like:
// <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');"  ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">

function touchStart(event,passedName) {
    // disable the standard ability to select the touched object
    event.preventDefault();
    // get the total number of fingers touching the screen
    fingerCount = event.touches.length;
    // since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
    // check that only one finger was used
    if ( fingerCount == 1 ) {
        // get the coordinates of the touch
        startX = event.touches[0].pageX;
        startY = event.touches[0].pageY;
        // store the triggering element ID
        triggerElementID = passedName;
    } else {
        // more than one finger touched so cancel
        touchCancel(event);
    }
}

function touchMove(event) {
    event.preventDefault();
    if ( event.touches.length == 1 ) {
        curX = event.touches[0].pageX;
        curY = event.touches[0].pageY;
    } else {
        touchCancel(event);
    }
}

function touchEnd(event) {
    event.preventDefault();
    // check to see if more than one finger was used and that there is an ending coordinate
    if ( fingerCount == 1 && curX != 0 ) {
        // use the Distance Formula to determine the length of the swipe
        swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
        // if the user swiped more than the minimum length, perform the appropriate action
        if ( swipeLength >= minLength ) {
            caluculateAngle();
            determineSwipeDirection();
            processingRoutine();
            touchCancel(event); // reset the variables
        } else {
            touchCancel(event);
        }   
    } else {
        touchCancel(event);
    }
}

function touchCancel(event) {
    // reset the variables back to default values
    fingerCount = 0;
    startX = 0;
    startY = 0;
    curX = 0;
    curY = 0;
    deltaX = 0;
    deltaY = 0;
    horzDiff = 0;
    vertDiff = 0;
    swipeLength = 0;
    swipeAngle = null;
    swipeDirection = null;
    triggerElementID = null;
}

function caluculateAngle() {
    var X = startX-curX;
    var Y = curY-startY;
    var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
    var r = Math.atan2(Y,X); //angle in radians (Cartesian system)
    swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
    if ( swipeAngle < 0 ) { swipeAngle =  360 - Math.abs(swipeAngle); }
}

function determineSwipeDirection() {

    if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) {
        swipeDirection = 'left';
    } else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) {
        swipeDirection = 'left';
    } else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) {
        swipeDirection = 'right';
    } else if ( (swipeAngle > 45) && (swipeAngle < 135) ) {
        swipeDirection = 'down';
    } else {
        swipeDirection = 'up';
    }
}

function processingRoutine() {
    var swipedElement = document.getElementById(triggerElementID);
    if ( swipeDirection == 'left' ) {
        sliders.goToNext();         
    } else if ( swipeDirection == 'right' ) {
        sliders.goToPrev();
    } else if ( swipeDirection == 'up' ) {
        sliders.goToPrev();         
    } else if ( swipeDirection == 'down' ) {
        sliders.goToNext();         
    }
}
person vignesh    schedule 27.11.2012
comment
Это хороший код, он работает, однако, если у меня есть ссылки в слайдере, он не пройдет. Он определяет как прикосновение - person shabany; 29.05.2015