基于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 相关文章推荐
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
vue实现扫码功能
Jan 17 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 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
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
Python高效编程技巧
2013/01/07 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python 调用钉钉机器人的方法
2019/02/20 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
python进阶之自定义可迭代的类
2019/08/20 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
PHP如何与mysql建立链接
2013/05/05 面试题
社区母亲节活动记录
2014/03/06 职场文书
党支部活动策划方案
2014/08/18 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
初中教师个人总结
2015/02/10 职场文书
python基础之函数的定义和调用
2021/10/24 Python