jQM - Swipe distance / direction plugin

by LuckyCat

HTML

<div data-role="page" id="index">
        <div class="gallery"></div>
        </div>

CSS

#index {
  background: #ffd800;
  width: 400px;
  height: 50px;
  margin: 0 auto;
}
.gallery {
  width: 50px;
  height: 50px;
  background: green;
  
  transform: translateX(100px);
  
  -webkit-transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease;
}

JavaScript

var gnStartX = 0;

var gnStartY = 0;

var gnCurrentX = 0;

var gnCurrent = 0;

var gnEndX = 0;

var gnEndY = 0;



var globalMovement = 0;


var mouseMoving = false;


/*

        // положение элемента

        var pos = $parent.offset();

        var elem_left = pos.left;

        var elem_top = pos.top;

        // положение курсора внутри элемента

        var Xinner = e.pageX - elem_left;

        var Yinner = e.pageY - elem_top;

        

        начальную

*/



        var $gallery = $('.gallery');

        

        function getStartPosition() {

          var $parent = $('.gallery');



          // положение элемента

          var pos = $parent.offset();

          var elem_left = pos.left;

          var elem_top = pos.top;

          // положение курсора внутри элемента

          var Xinner = e.pageX - elem_left;

          var Yinner = e.pageY - elem_top;

        }

        

        function swipe(currentX) {

          // console.log(currentX);

          $gallery.css({

            '-webkit-transform' : 'translateX(' + currentX +'px)',

            'transform' : 'translateX(' + currentX + 'px)'

            /*'-webkit-transform' : 'translate3d(' + currentX +'%, 0, 0)',

            'transform' : 'translate3d(' + currentX + '%, 0, 0)'*/

          });

        }

/* * * * * * * * * * * * * * * * 

    mousedown === touchstart

    Кнопка мыши нажата над элементом.


    mousemove === touchmove

    Каждое движение мыши над элементом генерирует это событие.


    mouseup === touchend

    Кнопка мыши отпущена над элементом.

* * * * * * * * * * * * * * * */

function nthroot(x, n) {

  try {

    var negate = n % 2 == 1 && x < 0;

    if(negate)

      x = -x;

    var possible = Math.pow(x, 1 / n);

    n = Math.pow(possible, n);

    if(Math.abs(x - n) < 1 && (x > 0 == n > 0))

      return negate ? -possible : possible;

  } catch(e){}

}

function getDistance (event) {

    console.log('-------\ngnStartX ' + gnStartX);

    //...