js如何实现一个左滑删除功能（附代码）

js如何实现一个左滑删除功能，下面web建站小编给大家详细介绍一下实现代码！

1、做一个list > p标签

2、js代码如下：

var expansion = null; //是否存在展开的list

var container = document.querySelectorAll('.list p a');

for(var i = 0; i < container.length; i++){
  var x, y, X, Y, swipeX, swipeY; 
  container[i].addEventListener('touchstart', function(event) {
    x = event.changedTouches[0].pageX;
    y = event.changedTouches[0].pageY;
    swipeX = true;
    swipeY = true ;
    if(expansion){
      //判断是否展开，如果展开则收起
      expansion.className = ""; 
    }
  });
  container[i].addEventListener('touchmove', function(event){
    X = event.changedTouches[0].pageX;
    Y = event.changedTouches[0].pageY;
    // 左右滑动
    if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
      // 阻止事件冒泡
      event.stopPropagation();
      if(X - x > 10){   //右滑
        event.preventDefault();
        this.className = "";    //右滑收起
      }
      if(x - X > 10){   //左滑
        event.preventDefault();
        this.className = "swipeleft";   //左滑展开
        expansion = this;
      }
      swipeY = false;
    }
    // 上下滑动
    if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
      swipeX = false;
    }        
  });
}

原生js如何判断图片是否存在

javascript如何获取页面中所有p标签

Vuejs用sortablejs实现表格之间上下拖拽功能

js数字滚动效果

el-table(Sortable)简单实现拖动排序(亲测有效)

标签： queryselectorAll, 左滑删除

上面是“js如何实现一个左滑删除功能（附代码）”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3180.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！