Implement the left-slide deletion function for Mobile Terminals Based on JS. js

Implement the left-slide deletion function for Mobile Terminals Based on JS. js

If you don't talk much about it, paste the Code directly. The specific code is as follows:

<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% "> Source: @ (item. diseaseInformation. source) </Span> <span style = "float: left; color: #808080; line-height: 2; vertical-align: bottom; width: 30% "> @( 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-red pay-order-btn pay-order-del "style =" height: 90px; line-height: 90px; width: 105px; font-size: 18px "> Delete </a> </div >}</div>

Jquery. productswipe. js Code

/********************* Based on jquery to simulate the sliding and deletion of the mobile terminal list ** 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) {// slide to delete var Drags ={}; Drags. dragtag = false; // drag status Drags. dragstart = true; // Drag the start sign Drags. datatransx = 0; $ (obj). on ('touchstart mouselow', function (e) {if (! (((E.tar get ). hasClass ("pay-order-swiper") | reset (e.tar get ). parents (). hasClass ("pay-order-swiper") {closeallswipe (); // click to restore if (e.originalEvent.tar getTouches) {Drags. dragx = e.originalEvent.tar getTouches [0]. pageX; Drags. dragy = e.originalEvent.tar getTouches [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'); // Add to prohibit selection var change = 0; if (e.originalEvent.tar getTouches) {change = e.originalEvent.tar getTouches [0]. pageX-Drags. dragx; changey = e.originalEvent.tar getTouches [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); values (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'); values (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'mirror.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 );}

Page usage executionmytouch($('.pay-list .pay-each'));

Summary

The above section describes how to implement the JavaScript-based left-slide deletion function for mobile terminals. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!