基于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 相关文章推荐
js 操作css实现代码
Jun 11 Javascript
Javascript 错误处理的几种方法
Jun 13 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 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
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Python selenium如何设置等待时间
2016/09/15 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
数控专业个人求职信范例
2013/11/29 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
党性观念心得体会
2014/09/03 职场文书
学校隐患排查制度
2015/08/05 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书