移动端 滑动删除 swipeDelete

功能比较简单常见,最近整理一下做备份记录。先看看线上 整体实际效果 ,基于原生js,不依赖其他类库

 

博客园地址  https://www.cnblogs.com/surfaces/p/8426056.html

github 地址:https://taylor-swift-1989.github.io/h5/swipeDelete/swipeDelete.html

下面是swipeDelete 用法 demo

 

 

默认参数

var defaults = {
		 	   distance:80,  //滑动距离
		 	   units:'px',  //默认单位
		 	   touchStart:function(){},//触摸开始回调
		 	   opened:function(){},//展开后回调
		 	   closed:function(){},//关闭后回调
		 	   duration:100,//毫秒
               deleteBtn:'.swipe-delete-btn',  //删除元素
               direction:'left',  //滑动方向
               deleteClose:true,  //点击删除是否 关闭
               deleteFn:function(){}  //删除事件   retuan false 不关闭  //   retuan true 关闭
};

 

dom 节点如下   支持2种结构 

A li 元素运动  transform: translateX(2px);  滑动元素和删除元素 父子 节点关系

 

<li id="li" class="swipe-delete-element list-li" >      //该节点 位移 transform: translateX
    <div class="con ">
     00 向左侧 滑动删除 一起过来
    </div>
    <div class="swipe-delete-btn btn">删除0</div>
</li>

  

 

 

B con 元素运动  transform: translateX(2px);  滑动元素和删除元素 兄弟节点关系

 

<li id="li" class=" list-li" >
    <div class="con swipe-delete-element ">   //该节点 位移 transform: translateX
     11 向左侧 滑动删除 藏在后面
    </div>
    <div class="swipe-delete-btn btn" style="right:0px;">删除1</div>
</li>

  

 

对应的js 如下,有疑问可以看下面源代码 附录

 

  

 

 参数  deleteClose:false,用法      点击  删除按钮并收回 滑动元素,   点击事件回调函数 deleteFn里面 return true 可以收回,或者通过   sa5.swipeClose() 方法促其关闭;

var swipedeletecontent5=document.querySelectorAll(".swipe-delete-element")[5];
var sa5=new swipeDelete(swipedeletecontent5,{
	distance:160,
	deleteBtn:'.swipe-delete-btn2',
	deleteClose:false,
	//direction:'left',
	touchStart:function(e){
		console.log("sa6 touchStart"+this.innerHTML);
		//console.log(this.innerHTML==e.target.innerHTML);
	},
	opened:function(e){
		//console.log("sa6 opened");
		console.log("sa6 opened"+this.innerHTML);
	},
	closed:function(e){
		//console.log("sa6 closed");
		console.log("sa6 closed"+this.innerHTML);
	},
	deleteFn:function(e){
		var that=this;
      console.log(e.target.parentNode);
		if(that.className=="on1"){
			alert("5on11"+that.innerHTML+'不 可以关闭');
			
		}else if(that.className=="on2"){
		alert("5on22"+that.innerHTML+'可以关闭');
		return true; //关闭
		}
	  }
})
sa5.swipeOpen();
//console.log(sa5)

document.getElementById("j_opend").addEventListener("click",function(){
	 var swipe5=document.querySelector(".swipe5").querySelector(".swipe-delete-element");
	 var flagOpen=swipe5.getAttribute("data-lock");
	
	 if(flagOpen=='false'){
	 	sa5.swipeOpen();	
		this.innerHTML="swipe5 关闭"
	 }
	 
	 if(swipe5.getAttribute("data-lock")=='true'){
	 	sa5.swipeClose();
	 
		this.innerHTML="swipe5打开 "
	 }

})

  

swipeDelete静态方法 API ,   关闭与打开  

var sa5=new swipeDelete(swipedeletecontent5,{});  sa5.swipeOpen(); sa5.swipeClose();

 

 创建的swipeDelete 对象  ,可省略new 关键字,swipeDelete 类 内部 如下

 

附上完整代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滑动删除</title>
<meta http-equiv="X-UA-Compatible" content="edge,chrome=1"  />
<meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 避免转码 -->
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport"   content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"  />
<meta name="renderer" content="webkit|ie-comp|ie-stand"> 
<meta name="apple-itunes-app" content="app-id=932758491">



 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
    
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no" >
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="screen-orientation" content="portrait"> <!-- uc强制竖屏  设置横屏应用得在config里面设置,网页是无法做到的 -->
<meta name="x5-orientation" content="portrait"> <!-- QQ强制竖屏 -->
<meta name="msapplication-tap-highlight" content="no"> <!-- windows phone 点击无高光 -->
<meta name="HandheldFriendly" content="true">  <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->

 <style>
/* CSS Document */
@charset "utf-8";
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,span,img,button ,em,i,b{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;min-width:320px;font-size:62.5%;}
body{font-family:"微软雅黑",'Helvetica Neue',Helvetica,tahoma,arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;line-height:1;font-size:14px;-webkit-touch-callout:none;-webkit-user-select:none;}
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block}
dl,li,menu,ol,ul{list-style:none}
address,em,i,th{font-weight:400;font-style:normal}
a{color:#999;display:block;}
a:link,a:visited{color:#999;text-decoration:none;cursor:pointer}
a:hover{cursor:pointer}
a:active,a:focus{outline:0;}
img{width:100%;border:0;vertical-align:middle;-webkit-user-select:none;}
input,select{outline:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-variant:normal;font-weight:normal;}
button,input[type=button],input[type=tel],input[type=reset],input[type=submit]{line-height:normal!important;-webkit-appearance:none}
::-webkit-input-placeholder{color:#777;}
::input-placeholder{color:#777;}
input:focus::-webkit-input-placeholder{-webkit-transition:.1s;opacity:0;}
input:focus::input-placeholder{transition:.1s;opacity:0;}
 header {
  background: #f7483b;
  border-bottom: 1px solid #ccc
 }
  
 header h2 {
  text-align: center;
  line-height: 54px;
  font-size: 16px;
  color: #fff
 }
  
 .list-ul {   touch-action: none; 
  overflow: hidden
 }
  
 .list-li {
  line-height: 60px; height: 60px; 
  border-bottom: 1px solid #fcfcfc;
  position: relative;

  color: #666;
  background: #999;
  -webkit-transition-duration:-webkit-transform .1s;
 transition-duration:transform .1s;  -webkit-transition-timing-function:ease-out ;transition-timing-function:ease-out ;
 }
  .con{ padding: 0 15px; position: relative; z-index: 7;    background: #f2f2f2;}
 .btn {
  position: absolute;
  top: 0;
  right: -80px;
  text-align: center;
  background: #ffcb20;
  color: #fff;
  width: 80px; z-index: 2;
 }
 
  .btn div {
  float: left; display: inline-block; height: 60px;;
  background: #ffcb20;
  color: #fff;
  width: 80px; z-index: 2;
 }
  .btn div:nth-of-type(2) {
  background: red;

 }
 </style>
 
</head>
 
<body>
 <header>
  <h2>suface 滑动删除 列表</h2>
 </header>
 <div style="height: 50px;; text-align: center; line-height: 50px;">suface 滑动删除  例子</div>
 
 <section class="list">
  <ul class="list-ul">
   <li id="li" class="swipe-delete-element list-li" >     <!-- //该节点 位移 transform: translateX-->
    <div class="con ">
     00 向左侧 滑动删除 一起过来
    </div>
    <div class="swipe-delete-btn btn">删除0</div>
  </li>
   
   
   <li id="li" class=" list-li" >
    <div class="con swipe-delete-element ">  <!-- //该节点 位移 transform: translateX-->
     11 向左侧 滑动删除 藏在后面
    </div>
    <div class="swipe-delete-btn btn" style="right:0px;">删除1</div>
  </li>
   
   
   
    <li id="li" class=" list-li swipe-delete-element"  >
    <div class="con ">
     22 向  you  侧 滑动删除
    </div>
    <div class="swipe-delete-btn btn" style="right:auto; left: -80px;">删除2</div>
   </li>
   
   
   
   <li id="li" class=" list-li " >
    <div class="con swipe-delete-element">
     33 向you  侧 滑动删除   藏在后面
    </div>
    <div class="swipe-delete-btn btn" style="right:auto; left: 0px;">删除3</div>
   </li>
   
   
   
   
   
     <li id="li" class=" list-li swipe-delete-element" >
    <div class="con  ">
     44 向左侧 滑动删除   多个 点击
    </div>
    <div class="swipe-delete-btn btn "  style="right: -160px;width:160px">
        <div style="width: 80px;" class="on1">4删除111 多个</div>
        <div style="width: 80px;" class="on2">4删除222 多个</div>
    </div>
   </li>
    
    
    
     <li id="li" class=" list-li  swipe5"  >
    <div class="con  swipe-delete-element " >
     55 向左侧 滑动删除   藏在后面 swipe5
    </div>
    <div class="swipe-delete-btn2 btn"  style="right: 0px;width:160px">
        <div style="width: 80px;" class="on1">5删除111 多个</div>
        <div style="width: 80px;" class="on2">5删除222 多个</div>
    </div>
   </li>
  
  
  
  <li id="li" class=" list-li " >
    <div class="con  swipe-delete-element66">
    666   swipe-delete-element66 参数传入
    </div>
    <div class="swipe-delete-btn2 btn"  style="right: 0px;width:160px">
        <div style="width: 80px;" class="on1">6删除111 多个</div>
        <div style="width: 80px;" class="on2">6删除222 多个</div>
    </div>
   </li>
  </ul>
 </section>
 
 <div style="height: 400px;;">
     
     <div id="j_opend" style="padding: 20px; text-align: center; background:#999; margin: 20px auto;">点击swipe5 关闭 </div>
     
 </div>
 
 <script>

  
 
  
 ;(function(window, document, undefined) { 
     
     
 function swipeDelete(element,options) {
     var _self=this;//此时this指向实例对象
 
     
         _self.swipeElement =element;
         
         if (typeof element === 'string') {
          _self.swipeElement =document.querySelector(element);
        }
     
        //取消new 关键字
     return (_self instanceof swipeDelete)? _self.init( _self.swipeElement,options):new swipeDelete(_self.swipeElement,options);
    
   }
swipeDelete.prototype = {
    constructor: swipeDelete,
    extend: function() {
        for(var i=1; i<arguments.length; i++)
                    for(var key in arguments[i])
                        if(arguments[i].hasOwnProperty(key))
                            arguments[0][key] = arguments[i][key];
                return arguments[0];
    },
    
  
   allowMultiple: true,
   endEvent : function() {
            var el = document.createElement("div");
            var transEndEventNames = {
                WebkitTransition: "webkitTransitionEnd",
                transition: "transitionend"
            };
            for (var name in transEndEventNames) {
                if (el.style[name] !== undefined) {
                    return transEndEventNames[name]
                }
            }
            el = null;
            return false
    }(),
   init: function(element,options) {
         var _self = this;
         var options=options||{};    
         var defaults = {
                distance:80,  //滑动距离
                units:'px',  //默认单位
                touchStart:function(){},//触摸开始毁掉
                opened:function(){},//展开后回调
                closed:function(){},//关闭后回调
                duration:100,//毫秒
               deleteBtn:'.swipe-delete-btn',  //删除元素
               direction:'left',  //滑动方向
               deleteClose:true,  //点击删除是否 关闭
               deleteFn:function(){}  //删除事件   retuan false 不关闭  //   retuan true 关闭
            };
        
       _self.options=_self.extend({},defaults,options);  
       _self.swipeEvent(element,_self.options);
           
  
    },
    
  
    swipeEvent:function(element,options){
        
         var _self=this;
           var ele=element;
           
               var isMoved = false;
             var isTouched = true;
             var isScrolling = undefined;//目标对象位置
             var touchesDiff = 0;////移动距离
             var startX=0;
             var startPos={
                x : 0,
                y : 0,
                startTime:+new Date
             };
           var scale=false;
           var isGo=false;
         var deleteBtn=ele.querySelectorAll(options.deleteBtn)[0]; //删除元素  可能是子元素   也可能同一级别 兄弟节点
         var deleteFn=options.deleteFn; //删除元素回调时间
         var distance=options.distance;//最大滑动距离
         var direction=options.direction;
         var deleteClose =options.deleteClose;
         var units=options.units;
             ele.setAttribute("data-lock","false");
         if(!deleteBtn){
             deleteBtn=ele.parentNode.nodeType==1&&ele.parentNode.querySelectorAll(options.deleteBtn)[0];
             scale=true;
         };

             _self.direction = direction;  
             
         
             
             deleteBtn.addEventListener('click', function(event) {
                        var that=this;
                        var event=event;
                        var target=event.target;
                           

                          if(options.deleteClose==true){
                               _self.swipeClose(ele,options);
                          }
                          
                          if(options.deleteFn&&options.deleteFn.apply(target,arguments)==true){
                               _self.swipeClose(ele,options);
                          }
                       event.stopPropagation();
                 });
                 
           
             ele.addEventListener('click', function(event) {
                     _self.swipeClose(ele,options);
                     
             });
             
           
            
             ele.addEventListener('touchstart', function(event) {
    
                var touchs = event.touches[0]; //手指头的一个 
                  
                 if (!_self.allowMultiple) { //不允许同时  展示多个删除
                       
                     // _self.swipeClose(ele,options)
                     //return false;
                 };  //不能滑动 有没有 缩进去的
                   
                    isMoved = false;
                    isTouched = true;
                    isScrolling = undefined;
                    startPos={
                       x: touchs.pageX||touchs.clientX,
                       y: touchs.pageY||touchs.clientY,
                       startTime:+new Date
                  };
                    
                ele.style.webkitTransitionDuration = ele.style.transitionDuration="0s";

                startX=(ele.style.WebkitTransform.replace(/translateX\(/g, "").replace(/(px|rem|%)\)/g, "")) * 1||(ele.style.transform.replace(/translateX\(/g, "").replace(/(px|rem|%)\)/g, "")) * 1||0;
                
                
                if(ele.getAttribute("data-lock")=="false"){
                   options.touchStart&&options.touchStart.apply(ele,arguments);
                }
                 
                document.addEventListener('touchmove', function(event) {
                    var event=event||window.event;
                         if (!isTouched){ 
                             return;
                         }
  
                         if ( event.touches.length > 1 || event.scale && event.scale !== 1){
                             return;
                         }
                         
                       var touchs = event.changedTouches[0];     
                     var movPos={
                                     x : touchs.pageX||touchs.clientX,
                                     y : touchs.pageY||touchs.clientY
                           };
                     
                         if (typeof isScrolling === 'undefined') {
                       isScrolling = !!( isScrolling || Math.abs(movPos.x-startPos.x) < Math.abs(movPos.y-startPos.y) );
                       }
                         
                        if (isScrolling) {
                            isTouched = false;
                            return;
                       }
                       
                        //event.preventDefault();
                       //if (!event.defaultPrevented) {
                               event.preventDefault();
                           //  }
                       
                       
                       _self.touchesDiff=movPos.x-startPos.x+ startX; //滑动的距离
                        isMoved = true;
                     
                       
                       if(direction=='left'){  //向左滑
                         
                            if(_self.touchesDiff>=0){
                                var l =isGo? Math.abs(_self.touchesDiff)*0.1:0;
                                ele.style.WebkitTransform=ele.style.transform = "translateX(" + l +units+") translateZ(0)";

                            }else{
                                
                            var l = Math.abs(_self.touchesDiff);
                               isGo=true;    
                               ele.style.WebkitTransform=ele.style.transform = "translateX(" + -l +units+") translateZ(0)";
                               if (l > distance) {
                                   if(scale){
                                       l = (distance+(l-distance)*0.39);;
                                   }else{
                                       l=distance;
                                   }
                                ele.style.WebkitTransform=ele.style.transform = "translateX(" + -l +units+") translateZ(0)";
                               }
 
                            }
                        
                       }
                       
                        if(direction=='right'){  //向右侧
                            
                            if(_self.touchesDiff>=0){
                                 
                             var l = Math.abs(_self.touchesDiff);
                                 isGo=true;    
                               ele.style.WebkitTransform=ele.style.transform = "translateX(" + l +units+") translateZ(0)";
                               if (l > distance) {
                                if(scale){
                                       l = (distance+(l-distance)*0.39);;
                                     
                                   }else{
                                       l=distance;
                                   }
                                
                                ele.style.WebkitTransform=ele.style.transform = "translateX(" + l +units+" ) translateZ(0)";
                               }
                            }else{
                                var l =isGo? Math.abs(_self.touchesDiff)*0.1:0;
                                ele.style.WebkitTransform=ele.style.transform = "translateX(-" + l +units+") translateZ(0)";
                            }
                        
                       }

                               
          });    
          

           document.addEventListener('touchend', function(event) {
                   if (!isTouched|| !isMoved) {
                     isMoved = false;
                     isTouched = false;
                      return;
                }
                  isMoved = false;
                  isTouched = false;
                  isGo=false;
               var touchs = event.changedTouches[0]; //手指头的一个  
               var endPos={
                     x : touchs.pageX||touchs.clientX,
                     y : touchs.pageY||touchs.clientY,
                     endTime:+new Date
               };
               var timeDiff=endPos.endTime-startPos.startTime;
               var distance=options.distance;
               var direction=options.direction;
               var touchesDiff=_self.touchesDiff;
               var action="close";
                  
               
             //是否关闭状态
              if(ele.getAttribute("data-lock")=='true'){
                    action = 'open';
              }
              
               if (timeDiff < 300 && (touchesDiff < -10 && direction === 'left' || touchesDiff > 10 && direction === 'right') 
               || timeDiff > 300 && (touchesDiff < -parseInt(distance/3) &&direction === 'left' || touchesDiff > parseInt(distance/3) && direction === 'right')
               )
               {
                    if(action == 'close'){
                        
                     _self.swipeOpen(ele,options)
                    
                    }else{
                        _self.swipeClose(ele,options);
                         isGo=false;
                         event.preventDefault();
                    }
               }else{

                       _self.swipeClose(ele,options);
                        isGo=false;
                        event.preventDefault();
                       
               }
               
          });    
                       
     });  
     return this;
     
    },
    
    swipeClose:function(ele,options){
        var  _self=this;
        var ele= ele||_self.swipeElement;
        var options=options||_self.options;
        var fired=false;
        var endEvent=_self.endEvent;
        var units=options.units;
        var duration=Number(options.duration/1000)||100;
        var sa=0;
        var handler = function(e) {
                ele.removeEventListener(endEvent, arguments.callee, false);
                fired = true;
                handler=null;
                sa++;
                
              if(sa>1){return }
                ele.setAttribute("data-lock","false");
                options.closed&&options.closed.apply(ele,arguments);;          
                callback=null;
               
            };
 
            ele.style.WebkitTransform=ele.style.transform = "translateX(-" + 0 + units+") ";
            ele.style.webkitTransitionDuration = ele.style.transitionDuration=duration+"s";
            ele.addEventListener(endEvent,handler.bind(this), false);

        setTimeout(function() {
            if (fired) {
                return
            }
            handler();
        }, parseInt(duration+25));
        
        return this;
    },
    swipeOpen:function(ele,options){
     var _self=this;
     var ele= ele||_self.swipeElement;
     var options=options||_self.options;
     var distance=options.distance;//最大滑动距离
     var units=options.units;
     var duration=Number(options.duration/1000)||100;
     var sa=0;
     var fired=false;
     var endEvent=_self.endEvent; 
     var handler = function (e) {
        ele.removeEventListener(endEvent, arguments.callee, false);
        fired=true;
        handler=null;
        
        sa++;

        if(sa>1){return }
        ele.setAttribute("data-lock","true");
        if(ele.getAttribute("data-lock")=="true"){
             options.opened&&options.opened.apply(ele,arguments);
         }
        };
            
            
        if(options.direction=="left"){
            distance=distance*-1;
        }
        
            ele.clientLeft;
            ele.style.WebkitTransform=ele.style.transform = "translateX(" + distance + units+") ";
            ele.style.webkitTransitionDuration = ele.style.transitionDuration=duration+"s";
            ele.addEventListener(endEvent,handler.bind(this), false);
     
           setTimeout(function() {
            if (fired) {
                return
            }
            handler();
              }, parseInt(duration+25));
            
            
        return this;
       }    
     }; 



    if (typeof exports == 'object') {
      module.exports = swipeDelete;
    }
    else if (typeof define == 'function' && define.amd) {
      define(function() {
        return swipeDelete;
      });
    }
    else {
      window.swipeDelete = swipeDelete;
    }
 
 
})(window,document);






var swipedeletecontent=document.querySelectorAll(".swipe-delete-element")[0];
var sa= swipeDelete(swipedeletecontent,{
     direction:'left',
    deleteFn:function(e){
         alert(this.innerHTML)
         console.log(e.target);
      }
})



var swipedeletecontent1=document.querySelectorAll(".swipe-delete-element")[1];
var sa1= swipeDelete(swipedeletecontent1,{
     
     deleteFn:function(e){
         alert(this.innerHTML);
         console.log(e.target);

     }
})



var swipedeletecontent2=document.querySelectorAll(".swipe-delete-element")[2];
var sa2= swipeDelete(swipedeletecontent2,{
     direction:'right',
     deleteFn:function(e){
         alert(this.innerHTML);
         console.log(e.target);

     }
})
//console.log(sa2.swipeOpen())

var swipedeletecontent3=document.querySelectorAll(".swipe-delete-element")[3];
var sa3= swipeDelete(swipedeletecontent3,{
     direction:'right',
     deleteFn:function(e){
             alert(this.innerHTML);
         console.log(e.target);

     }
})
//console.log(sa3);
  
  
  
  
  
var swipedeletecontent4=document.querySelectorAll(".swipe-delete-element")[4];
var sa4= swipeDelete(swipedeletecontent4,{
    distance:160,
    direction:'left',
    deleteFn:function(e){
        //console.log(e.target);

         var that=this;

        if(that.className=="on1"){
            alert("on1"+that.innerHTML)
        }else if(that.className=="on2"){
        alert("on2"+that.innerHTML)    
        }
      }
})
//console.log(sa4.swipeOpen())



var swipedeletecontent5=document.querySelectorAll(".swipe-delete-element")[5];
var sa5=new swipeDelete(swipedeletecontent5,{
    distance:160,
    deleteBtn:'.swipe-delete-btn2',
    deleteClose:false,
    //direction:'left',
    touchStart:function(e){
        console.log("sa6 touchStart"+this.innerHTML);
        //console.log(this.innerHTML==e.target.innerHTML);
    },
    opened:function(e){
        //console.log("sa6 opened");
        console.log("sa6 opened"+this.innerHTML);
    },
    closed:function(e){
        //console.log("sa6 closed");
        console.log("sa6 closed"+this.innerHTML);
    },
    deleteFn:function(e){
        var that=this;
      console.log(e.target.parentNode);
        if(that.className=="on1"){
            alert("5on11"+that.innerHTML+'不 可以关闭');
            
        }else if(that.className=="on2"){
        alert("5on22"+that.innerHTML+'可以关闭');
        return true; //关闭
        }
      }
})
sa5.swipeOpen();
//console.log(sa5)

document.getElementById("j_opend").addEventListener("click",function(){
     var swipe5=document.querySelector(".swipe5").querySelector(".swipe-delete-element");
     var flagOpen=swipe5.getAttribute("data-lock");
    
     if(flagOpen=='false'){
         sa5.swipeOpen();    
        this.innerHTML="swipe5 关闭"
     }
     
     if(swipe5.getAttribute("data-lock")=='true'){
         sa5.swipeClose();
     
        this.innerHTML="swipe5打开 "
     }

})



var sa66=new swipeDelete(".swipe-delete-element66",{
    distance:160,
    deleteBtn:'.swipe-delete-btn2',
    deleteClose:true,
    //direction:'left',
    touchStart:function(e){
        console.log("sa6 touchStart"+this.innerHTML);
        //console.log(this.innerHTML==e.target.innerHTML);
    },
    opened:function(e){
        //console.log("sa6 opened");
        console.log("sa6 opened"+this.innerHTML);
    },
    closed:function(e){
        //console.log("sa6 closed");
        console.log("sa6 closed"+this.innerHTML);
    },
    deleteFn:function(e){
        var that=this;
        console.log(e.target.parentNode);
        if(that.className=="on1"){
            alert("6on11"+that.innerHTML);
            
        }else if(that.className=="on2"){
        alert("6on22"+that.innerHTML)
        
        
        }
         //console.log(this.innerHTML);

      }
})
console.log(sa66);
 </script>
 
 
</body>
</html>

 

posted @ 2018-02-07 12:51 surfaces 阅读(...) 评论(...) 编辑 收藏