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

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

rush:js;">
ottom:0; border-radius: 5px;">
diseaseinformation.ListPicPath);height:70px;border-radius:0" onclick="Turn('@item.diseaseInfoID')">
diseaseInfoID')"> @(item.diseaseinformation.Title.GetSubstr(60))
diseaseInfoID')"> ottom;width:70%">来源:@(item.diseaseinformation.source) ottom;width:30%"> @(item.diseaseinformation.browseNum)
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">删除
}

jquery.productswipe.js代码

rush: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)'); $(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)'); $('.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实现移动端左滑删除功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...