基于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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 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设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
javascript来定义类的规范小结
2010/11/19 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
JS重载实现方法分析
2016/12/16 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Django卸载之后重新安装的方法
2017/03/15 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
Django视图扩展类知识点详解
2019/10/25 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
python 安装impala包步骤
2020/03/28 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
剪彩仪式主持词
2014/03/19 职场文书
小学校本培训方案
2014/06/06 职场文书
采购员工作总结范文
2015/08/12 职场文书