Question

我有一些垂直排序的div元素列表。使用jQuery TouchSwipe plugin添加了滑动事件来捕捉左右滑动。想法是通过向左或向右滑动来删除列表中的元素：

enter image description here

最后我得到了类似的内容：

＆＃13;

$(function() {

  $('.swElement').swipe({
      swipeStatus: function(event, phase, direction, distance, duration, fingerCount) {
        console.log(distance);
        if (phase == "move") {
          if (direction == "right") {
            $(this).css({
              'right' : (distance*-1)+'px'
            });  
          }
        } else if (phase == "cancel") {
          $(this).css({
              'right' : 0
          });
        } else if (phase == "end") {
          $(this).animate({
              'right' : '-100%'
          }, 200, function() {
             $(this).remove();
          });
        } else {
           //?????
        }
      },
      threshold: 150,
      maxTimeThreshold: 5000,
	  fingers: 'all'
  });
  
});

＆＃13;

.swElement {
  display: block;
  width: 100%;
  height: 50px;
  border: 1px solid black;
  box-sizing: border-box;
  padding: 0 10px;
  line-height: 50px;
  cursor: pointer;
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/2130702/cdn/jquery.touchSwipe.min.js"></script>

<h2>Swipe right to remove element</h2>

<div class="swElement">Element</div>
<div class="swElement">Element</div>
<div class="swElement">Element</div>
<div class="swElement">Element</div>
<div class="swElement">Element</div>

＆＃13;

问题

它在移动Chrome浏览器上工作得很好，但可以阻止原生Android浏览器上/下滚动。

我知道这个swipeStatus会抓住左/右和上/下方向，但不知道如何防止它 - 我只需要正确的滑动事件。

有什么想法吗？提前谢谢。

更新

我无法使用jQuery移动框架，因为它与我必须使用的其他脚本冲突。也许会有另一种方法来解决这个问题？

Answer 1

这不能解决您的问题的实际问题，但可以替代触摸插件。您仍然可以将它们用于同一应用或网站中的其他内容。

巧妙的是，前几天我正在看这个（jquery-mobile-swipe-list）https://github.com/ksloan/jquery-mobile-swipe-list/blob/master/index.html和这个演示http://jsbin.com/luzunu/1/edit?html,css,js,output，它使用一些数学来检测水平触摸。

我创建了两个演示。一个可以显示你问题中的图片等元素背后的内容，另一个是你所拥有的代码中拖拽/滑动删除的内容。

使用-webkit-transform: translateZ(0); transform: translateZ(0);闪烁元素的任何问题都可以解决闪烁问题。

演示拖动/滑动以显示在后面。我将触摸事件开始延迟5秒钟。

https://jsfiddle.net/4gk27ru1/

代码

    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;
      } else if (handlingTouch) {
        e.preventDefault();
        onSwipeMove(e);
      }
    });

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



    function slide(x) {

// slide the element

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

    var swipeOrigin, x, itempos;
    function onSwipeStart(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;
    }
    function onSwipeMove(e) {
      x = e.touches[0].clientX - swipeOrigin;
      slide(x);
    }
    function onSwipeEnd(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);

因为在使用if语句时，像素的移动可以是正或负，以防止元素从任何一侧移动。可以使用if/else if

应用其他条件

Example

如果触摸了加上像素，则将元素从左向右移动（---->）。从右到左（＆lt; -----）的相反方式小于1像素，即(x < 1)

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

https://jsfiddle.net/v5Ldovmj/

演示2 幻灯片删除

https://jsfiddle.net/afkdtjh9/

<强>附加

// 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 DOM

slide(itemwidth);
setTimeout(function() {
$(itemis).slideUp("fast").remove()
}, 500);

您可以使用 jquery animate 或像 velocity js 这样的插入来控制元素移动的速度，因此使用css变换本身感觉非常快

Answer 2

if (direction == "left"){
   return false;
}

向左滑动时阻止任何事件

Answer 3

比上面的所有答案都简单。只需添加此参数，您就可以了：

    allowPageScroll:"vertical"

元素上的jQuery touchSwipe事件阻止滚动

问题

更新

3 个答案: