基于JS实现移动端左滑删除功能


Posted in Javascript onJuly 28, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<div class="wrap pay-wrap" id="lists">
    @foreach (var item in Model)
    {
      <div class="pay-list" style="height:90px;margin: 10px 15px 10px 15px;" id="@item.UID">
        <div class="pay-each" style="height:90px;margin-bottom:0; border-radius: 5px;">
          <div class="pay-order-teacher" style="background-image:url(@item.DiseaseInformation.ListPicPath);height:70px;border-radius:0" onclick="Turn('@item.DiseaseInfoID')"></div><div class="detaildiv" style="padding:0;padding-top:10px" onclick="Turn('@item.DiseaseInfoID')">
            @(item.DiseaseInformation.Title.GetSubstr(60))
          </div>
          <div style="height:20px;margin-right:10px;line-height:20px;vertical-align:middle" onclick="Turn('@item.DiseaseInfoID')">
            <span style="float:left;color: #808080;line-height:2;vertical-align:bottom;width:70%">来源:@(item.DiseaseInformation.Source)</span>
            <span style="float:left;color: #808080;line-height:2;vertical-align:bottom;width:30%"><img src="~/Content/img/yueduliang.png" style="height:20px" /> @(item.DiseaseInformation.BrowseNum)</span>
          </div>
          <div class="pay-order-swiper" style="height:90px;margin-left:15px;width:80px"><a href="javascript:;" rel="external nofollow" onclick="del('@item.UID')" class="btn btn-red pay-order-btn pay-order-del" style="height:90px;line-height:90px;width:105px;font-size:18px">删除</a>
          </div>
        </div>
      </div>
    }
  </div>

jquery.productswipe.js代码

/********************
 * 基于jquery模拟移动端列表左右滑动删除
 * author:yaohuitao@100tal.com
 * ******************/
function prevent_default(e) {
  e.preventDefault();
}
function disable_scroll() {
  $(document).on('touchmove', prevent_default);
}
function enable_scroll() {
  $(document).off('touchmove', prevent_default);
}
var mytouch = function (obj) {
  //滑动删除
  var Drags = {};
  Drags.dragtag = false;//拖动状态
  Drags.dragstart = true;//拖动开始标志
  Drags.datatransx = 0;
  $(obj)
    .on('touchstart mousedown', function (e) {
      if (!($(e.target).hasClass("pay-order-swiper") || $(e.target).parents().hasClass("pay-order-swiper"))) {
        closeallswipe();   //点击还原
        if (e.originalEvent.targetTouches) {
          Drags.dragx = e.originalEvent.targetTouches[0].pageX;
          Drags.dragy = e.originalEvent.targetTouches[0].pageY;
        } else {
          Drags.dragx = e.pageX;
          Drags.dragy = e.pageY;
        }
        if ($(e.currentTarget).attr("data-transX")) {
          Drags.datatransx = parseInt($(e.currentTarget).attr("data-transX"));
        }
        Drags.dragtag = true;
        Drags.dragstart = true;
      }
    })
    .on('touchmove mousemove', function (e) {
      if (Drags.dragtag) {
        $(e.currentTarget).removeClass('animatedh');
        $(e.currentTarget).addClass('dragstart');  //添加禁止选择
        var change = 0;
        if (e.originalEvent.targetTouches) {
          change = e.originalEvent.targetTouches[0].pageX - Drags.dragx;
          changey = e.originalEvent.targetTouches[0].pageY - Drags.dragy;
        } else {
          change = e.pageX - Drags.dragx;
          changey = e.pageY - Drags.dragy;
        }
        if (Drags.dragstart) {
          if (Math.abs(changey) < 20) {
            showswiperfbn();
          }
        } else {
          showswiperfbn();
        }
        function showswiperfbn() {
          if (Math.abs(change) > 20) {
            Drags.dragstart = false;
            if (change < -20) {
              change = change + Drags.datatransx + 20;
            } else {
              change = change + Drags.datatransx - 20;
            }
            change = Math.min(Math.max(-300, change), 0);
            $(e.currentTarget).css('transform', 'translate3D(' + change + 'px,0px,0px)');
            $(e.currentTarget).attr("data-transX", change);
            disable_scroll();
          }
        }
      }
    })
    .on('touchend mouseup', function (e) {
      var left = parseInt($(e.currentTarget).attr("data-transX"));
      var new_left;
      if ($(e.currentTarget).hasClass("open")) {
        if (left > -110) {
          new_left = 0;
          $(e.currentTarget).removeClass('open');
        } else {
          new_left = -120;
        }
      } else {
        if (left < -20) {
          new_left = -120;
          $(e.currentTarget).addClass('open');
        } else {
          new_left = 0;
        }
      }
      $(e.currentTarget).removeClass('dragstart');
      $(e.currentTarget).css('transform', 'translate3D(' + new_left + 'px,0px,0px)');
      $(e.currentTarget).attr("data-transX", new_left);
      $(e.currentTarget).addClass('animatedh');
      Drags.dragtag = false;
      enable_scroll()
    });
}
function closeallswipe() {
  $('.pay-list .pay-each').css('transform', 'translate3D(0px,0px,0px)');
  $('.pay-list .pay-each').removeClass('open');
  $('.pay-list .pay-each').addClass('animatedh');
  $('.pay-list .pay-each').attr("data-transX", 0);
}

页面使用 执行mytouch($('.pay-list .pay-each'));

基于JS实现移动端左滑删除功能

总结

以上所述是小编给大家介绍的基于JS实现移动端左滑删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
HTML颜色选择器实现代码
Nov 23 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
vue写一个组件
Apr 09 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 #Javascript
webpack实现热更新(实施同步刷新)
Jul 28 #Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 #Javascript
解决React Native端口号修改的方法
Jul 28 #Javascript
vue+vux实现移动端文件上传样式
Jul 28 #Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 #Javascript
vue使用vue-cli快速创建工程
Jul 28 #Javascript
You might like
利用static实现表格的颜色隔行显示
2006/10/09 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
深入浅出php socket编程
2015/05/13 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
javascript事件模型代码
2007/07/01 Javascript
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
vue axios 简单封装以及思考
2018/10/09 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
小学生期末评语大全
2014/04/21 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
离婚被告代理词
2015/05/23 职场文书
施工安全协议书
2016/03/22 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电
pytorch中的 .view()函数的用法介绍
2022/03/17 Python