Jquery Touchswipe Event On Element Prevents Scroll

I have some list of div elements ordered vertically. Using jQuery TouchSwipe plugin added swipe event to catch left-right swipe. Idea was to remove element from list by swiping it

Solution 1:

This is not answering the actual problem for your question, but is an alternative to touch plugging(s). You can still use them for other things in the same app or website.

Coincidence the other day i was having a look at this (jquery-mobile-swipe-list) https://github.com/ksloan/jquery-mobile-swipe-list/blob/master/index.html and this demo http://jsbin.com/luzunu/1/edit?html,css,js,output which uses some Math to detect horizontal touch.

I Created two demos. One that reveals whats behind the elements like the picture in your question and another to drag/swipe to delete like in the code you have.

Any problems with elements flickering using -webkit-transform: translateZ(0); transform: translateZ(0); fixes the flickers.

Demo drag/swipe to reveal behind. i put in a delay of 5 seconds for the touch events to start.

https://jsfiddle.net/4gk27ru1/

Code

var startPos;
    var handlingTouch = false;
    var itemis;
    setTimeout(function() {

    document.addEventListener('touchstart', function(e) {
      // Is this the first finger going down? if (e.touches.length == e.changedTouches.length) {
        startPos = {
          x: e.touches[0].clientX,
          y: e.touches[0].clientY
        };
      }
    });

    document.addEventListener('touchmove', function(e) {
      // If this is the first movement event in a sequence:if (startPos) {
        // Is the axis of movement horizontal?if (Math.abs(e.changedTouches[0].clientX - startPos.x) > Math.abs(e.changedTouches[0].clientY - startPos.y)) {
          handlingTouch = true;
          e.preventDefault();
          onSwipeStart(e);
        }
        startPos = undefined;
      } elseif (handlingTouch) {
        e.preventDefault();
        onSwipeMove(e);
      }
    });

    document.addEventListener('touchend', function(e) {
      if (handlingTouch && e.touches.length == 0) {
        e.preventDefault();
        onSwipeEnd(e);
        handlingTouch = false;
      }
    });



    functionslide(x) {

// slide the element

    $(itemis).css({transform: "translatex("+x+"px)"})
    }

    var swipeOrigin, x, itempos;
    functiononSwipeStart(e) {

// find what element is been touched. In your case it may be closest("swElement") but you need to test

      itemis = $(e.target).closest("li").find(".move")

      swipeOrigin = e.touches[0].clientX;
    }
    functiononSwipeMove(e) {
      x = e.touches[0].clientX - swipeOrigin;
      slide(x);
    }
    functiononSwipeEnd(e) {

    //On Touch End if x (distance traveled to the right) is greater than +35 pixels then slide element  +100 pixels.if (x > 35) { 
    slide(100);
      }
      else {
      slide(0);
    }
    }
    }, 5000);

Because the movement of pixels are either in plus or minus to prevent the movement of the elements from either side its easy when using an if statement. Other conditions can be applied using if/else if

Example

move the element from left to right (---->) if plus pixels touched. The Opposite way right to left (<-----) is less than 1 pixel i.e (x < 1)

if (x > 1) { 
 slide(x);
  }

https://jsfiddle.net/v5Ldovmj/

Demo 2 Slide to Delete

https://jsfiddle.net/afkdtjh9/

Additions

// detect window width to fly out the items from whatever the devices window  width is. var itemwidth = $(window).width();

// slide item to windows width wait half a second, slide it up and remove from the DOMslide(itemwidth);
setTimeout(function() {
$(itemis).slideUp("fast").remove()
}, 500);

You can use jquery animate or a pluging like velocity js to control the speed of the elements moving so its smoother as using css transform by itself feels very fast

Solution 2:

Its simpler than all the answers above. Just add this parameter and you'll be good to go :

    allowPageScroll:"vertical"

Solution 3:

if (direction == "left"){
   returnfalse;
}

Prevents any events when swiping to the left