滑动删除功能
<!DOCTYPE html> <html> <head> <title>JQM Swipe Delete</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" /> <style> .behind { width: 100%; height: 100%; position: absolute; top: 0; right: 0; } .behind a.ui-btn { width: 68px; margin: 0px; float: right; border: none; } .behind a.delete-btn, .behind a.delete-btn:active, .behind a.delete-btn:visited, .behind a.delete-btn:focus, .behind a.delete-btn:hover { color: white; background-color: red; text-shadow: none; } .behind a.ui-btn.pull-left { float: left; } .behind a.edit-btn, .behind a.edit-btn:active, .behind a.edit-btn:visited, .behind a.edit-btn:focus, .behind a.edit-btn:hover { color: white; background-color: orange; text-shadow: none; } .swipe-delete li a span{ display:inline-block; width:100px; background-color:#888;} .swipe-delete li { height: 50px; line-height: 50px; display: block; border:solid 1px #444; position:relative; }.swipe-delete li a{ height: 50px; line-height: 50px; display: block; border:solid 1px #444; z-index: 18; position: relative; background-color: #fff; } .behind { } /* body{touch-action: none;} */ </style> <script> function add(t){ t.innerHTML=t.innerHTML+1; } </script> </head> <body> <div id="container"> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Swipe Delete</h1> </div> <div data-role="content"> <ul data-role="listview" class="swipe-delete"> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 1<span onclick="add(this)">0</span></a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 2<span onclick="add(this)">0</span></a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 3<span onclick="add(this)">0</span></a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 4<span onclick="add(this)">0</span></a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 5</a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 6</a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 7</a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 8</a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 9</a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 10</a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 11</a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 12</a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 13</a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 14</a> </li> <li> <div class="behind"> <a href="#" class="ui-btn delete-btn">Delete</a> <a href="#" class="ui-btn edit-btn pull-left">Edit</a> </div> <a href="#">item 15</a> </li> </ul> </div> </div> </div> </body> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <!-- <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script><script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script> <script src="jquery-1.11.3.min.js"></script>--> <script type="text/javascript"> $(function() { function prevent_default(e) { e.preventDefault(); } function disable_scroll() { $(document).on('touchmove', prevent_default); } function enable_scroll() { $(document).unbind('touchmove', prevent_default) } var x; var y; var sy; $('.swipe-delete li > a') .on('touchstart', function(e) { //console.log(e.originalEvent.pageX) $('.swipe-delete li > a.open').css('left', '0px').removeClass('open') // close em all $(e.currentTarget).addClass('open') x = e.originalEvent.targetTouches[0].pageX // anchor point y = e.originalEvent.targetTouches[0].pageY // anchor point sy=$(document).scrollTop(); }) .on('touchmove', function(e) { var change = e.originalEvent.targetTouches[0].pageX - x var changeY = e.originalEvent.targetTouches[0].pageY - y var changeSy=$(document).scrollTop()-sy; if(Math.abs(changeSy)<20&&Math.abs(change)>Math.abs(changeY)&&getAngle(change,changeY)==3) { change = Math.min(Math.max(-100, change), 100) // restrict to -100px left, 0px right e.currentTarget.style.left = change + 'px' if (change < -10) disable_scroll() // disable scroll once we hit 10px horizontal slide }else{ e.currentTarget.style.marginLeft = '0px' // disable_scroll() } }) .on('touchend', function(e) { var left = parseInt(e.currentTarget.style.left) var new_left; if (left < -35) { new_left = '-100px' } else if (left > 35) { new_left = '100px' } else { new_left = '0px' } // e.currentTarget.style.left = new_left $(e.currentTarget).animate({left: new_left}, 200) enable_scroll() }); $('li .delete-btn').on('touchend', function(e) { e.preventDefault() $(this).parents('li').slideUp('fast', function() { $(this).remove() }) }) $('li .edit-btn').on('touchend', function(e) { e.preventDefault() $(this).parents('li').children('a').html('edited') }) }); //返回角度 function GetSlideAngle(dx,dy) { return Math.atan2(dy,dx) * 180 / Math.PI; } function getAngle(dx,dy){ //根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动 var result = 0; //如果滑动距离太短 if (Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result; } var angle = GetSlideAngle(dx, dy); if (angle >= -45 && angle < 45) { result = 4; }else if (angle >= 45 && angle < 135) { result = 1; }else if (angle >= -135 && angle < -45) { result = 2; }else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { result = 3; } console.log(result); return result; } </script> </html>
js方式有bug 不知道问题在哪里
moveDel($('.shopcartmove'),function(o,lx){console.log("=");
$(".shopcart").removeAttr("style");
$(".shopcartall").removeClass("selected");
if(lx){
$(o).parents(".shopcart").css("margin-left",lx+"px");
}else {
$(o).parents(".shopcartall").addClass("selected");
}
},function(o,rx){
if(rx){console.log("==");
var mleft=parseInt($(o).parents(".shopcart").css("margin-left"));
if($(o).parents(".shopcartall").hasClass("selected")||mleft) {
$(o).parents(".shopcart").css("margin-left", (mleft+rx)<=0?(mleft+rx):0 + "px");
}
if(rx<-10){
$(document).on('touchmove', function(e){e.preventDefault();});
}
}else {
$(o).parents(".shopcartall").removeClass("selected");
}
},function(){
},function(o, type){console.log("====");
$(".shopcart").removeAttr("style");
$(".shopcartall").removeClass("selected");
if(type==0){
$(o).parents(".shopcartall").addClass("selected");
}
$(document).unbind('touchmove',function(e){e.preventDefault();})
});
/*
$(document).on('touchmove', function (e) {
e.preventDefault();
});
$(".numoperate").on('touchmove,touchend', function (e) {
e.preventDefault();
e.stopPropagation();
});
$('#shop_cart_all').on('touchmove', function (e) {
e.stopPropagation();
});*/
/**
* 删除按钮的touch事件
* @param container
* @param touchleft
* @param touchright
*/
function moveDel(container,touchleft,touchright,touchbegin,touchfinish) {
for(var i = 0; i < container.length; i++){
var x=0, y=0, X=0, Y=0, swipeX=0, swipeY=0, xm=70;
container[i].addEventListener('touchstart', function (event) {
x = event.changedTouches[0].pageX;
y = event.changedTouches[0].pageY;
swipeX = true;
swipeY = true;
touchbegin();
// if (expansion) { //判断是否展开，如果展开则收起
// expansion.className = "";
// }
});
container[i].addEventListener('touchmove', function (event) {
X = event.changedTouches[0].pageX;
Y = event.changedTouches[0].pageY;
// 左右滑动
if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
// 阻止事件冒泡
event.stopPropagation();
if ((x - X > 0)&&(x - X <xm)) { //左滑
touchleft(this,X - x);
event.preventDefault();
// this.className = ""; //右滑收起
}
if (x - X == xm) { //左滑
touchleft(this);
event.preventDefault();
// this.className = "swipeleft"; //左滑展开
// expansion = this;
}
if ((X - x > 0)&&(X - x < xm)) { //右滑
touchright(this,X - x);
event.preventDefault();
// this.className = ""; //右滑收起
}
if (X - x == xm) { //右滑
touchright(this);
event.preventDefault();
// this.className = ""; //右滑收起
}
swipeY = false;
}
// // 上下滑动
// if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
// swipeX = false;
// }
});
container[i].addEventListener('touchend', function (event) {
if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
swipeX = false;
swipeY = false;
// 阻止事件冒泡
event.stopPropagation();
if(x - X> 0) {
if(x - X > 35&& X>0) {//左滑位移够 展开
console.log("x:" +x+"X:"+X);
console.log("--");
touchfinish(this, 0);
event.preventDefault();
}else{//左滑位移不够 收起
console.log("---");
touchfinish(this, 1);
event.preventDefault();
}
x=0; X=0;
}else{
if(x - X < 8) {//右滑位移够 收起
touchfinish(this, 1);
event.preventDefault();
// }else{//右滑位移够 展开
// touchfinish(this, 0);
// event.preventDefault();
}
x=0; X=0;
}
// if(Math.abs(x - X)>35){
// if(x - X > 0) {//左滑位移够 展开
// touchfinish(this, 0);
// event.preventDefault();
// }else{//右滑位移够 收起
// touchfinish(this, 1);
// event.preventDefault();
// }
// }else{
// if(x - X> 0) {//左滑位移不够 收起
// touchfinish(this, 1);
// event.preventDefault();
// }else{//右滑位移够 展开
// touchfinish(this, 0);
// event.preventDefault();
// }
// }
}
});
}
}
