基于JS实现移动端左滑删除功能
来源:互联网 发布:java 分布式 dubbo 编辑:程序博客网 时间:2024/05/16 15:31
HTML
<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’));
阅读全文
0 0
- 基于JS实现移动端左滑删除功能
- jQuery实现移动端左滑删除功能
- 移动端左滑删除功能
- 基于SSH实现全选删除功能
- Android基于SwipeMenuListView实现滑动删除功能
- 运用js实现批删除功能
- 基于Unity3D的移动端摇一摇功能的实现
- 基于struts 的实现文件的下载和删除功能
- 基于Vue2.js全家桶的移动端AppDEMO实现
- 基于Vue2.js全家桶的移动端AppDEMO实现
- js实现全选、反选功能(批量删除)
- 通过js实现删除功能 ruby on rails
- JS实现列表的增加和删除功能
- 行式填报表利用JS函数实现批量删除功能
- JS实现复选框的全选和批量删除功能
- JS实现复选框的全选和批量删除功能
- 用Vue.js实现全选与全不选删除功能
- iOS table简单实现增加移动和删除功能与自定义cell的实现
- Centos7安装-多节点PbsPro
- java中Object类型转String类型
- 软件测试全局认识
- Linux下Apache PHP MYSQL 默认安装路径
- 一个ip对应两个域名下IIS重定向
- 基于JS实现移动端左滑删除功能
- 1130 host is not allowed to connect to this MySql server,MySQL
- localhost,127.0.0.1 和 本机IP 三者的区别
- 聪明的KK
- Centos7安装-多节点Torque
- OpenCV单kinect多帧静止场景的深度图像去噪
- IIS 应用程序与虚拟目录的异同
- DFS和BFS区别
- 在android style文件中使用自定义属性