[英]JQuery mobile how to prevent the li item to swipe right?
I am using this peace of code https://github.com/ksloan/jquery-mobile-swipe-list that I have modified and its working fine. 我使用的是我修改过的代码https://github.com/ksloan/jquery-mobile-swipe-list ,可以正常工作。 However the code has two buttons, right and left. 但是,代码有两个按钮,向右和向左。 In my project, I only have one in the right side so swipe left to uncover it its ok, but I cannot find how can I eliminate the swipe right since I dont have any button in the left side and it crashes every time it swipe that direction. 在我的项目中,我的右侧只有一个,所以向左滑动即可找到它的确定,但是我找不到如何消除向右滑动的方法,因为我在左侧没有任何按钮,并且每次滑动都会崩溃方向。
Any advice? 有什么建议吗?
Code: 码:
$(function() {
function prevent_default(e) {
e.preventDefault();
}
function disable_scroll() {
$(document).on('touchmove','#myPostsList .ui-content', prevent_default);
}
function enable_scroll() {
$(document).unbind('touchmove',' #myPostsList .ui-content', prevent_default);
}
var x;
$(document)
.on('touchstart', '.swipe-delete li > a', function(e) {
console.log(e.originalEvent.pageX);
///// GET ID OF SELECTED POST AND STORE IN A DIV FOR AJAX /////
document.getElementById("myPostIDStorage").value = $(this).attr('data-key');
$('.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
})
.on('touchmove', '.swipe-delete li > a', function(e) {
var change = e.originalEvent.targetTouches[0].pageX - x;
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
})
.on('touchend', '.swipe-delete li > a', 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();
});
}); });
Make sure you have all the Original code 确保您拥有所有原始代码
All you need to do is change the Maths a little bit 您需要做的就是稍微改变一下数学
where it says change = Math.min(Math.max(-100, change), 100);
它说change = Math.min(Math.max(-100, change), 100);
change to change = Math.min(Math.max(-100, change), 0)
更改为change = Math.min(Math.max(-100, change), 0)
changing 100 to 0 means 0 pixels of movement from the left to right, so it doesn't move 将100更改为0表示从左到右移动0像素,因此它不会移动
Demo 演示
http://jsfiddle.net/yvjr0zqf/ http://jsfiddle.net/yvjr0zqf/
if you wanted the right side to stop moving reverse the Math but this time 100 is plus number change = Math.min(Math.max(0, change), 100)
如果您想让右侧停止向右移动数学运算,但是这次100是加数字change = Math.min(Math.max(0, change), 100)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.