JQuery 移动如何防止 li 项向右滑动
JQuery mobile how to prevent the li item to swipe right?
我正在使用我已经修改的代码 https://github.com/ksloan/jquery-mobile-swipe-list 的和平,并且它工作正常。但是,代码有两个按钮,右侧和左侧。在我的项目中,我只有一个在右侧,所以向左滑动以发现它没关系,但我找不到如何消除向右滑动,因为我在左侧没有任何按钮,并且每次滑动时它都会崩溃那个方向。
有什么建议吗?
法典:
$(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();
});
}(;
确保你拥有所有的原始代码
您需要做的就是稍微改变一下数学
它说change = Math.min(Math.max(-100, change), 100);
更改为change = Math.min(Math.max(-100, change), 0)
将 100 更改为 0 表示从左到右移动的像素为 0,因此它不会移动
演示
http://jsfiddle.net/yvjr0zqf/
如果您希望右侧停止反向移动数学,但这次 100 是正数 change = Math.min(Math.max(0, change), 100)
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- FabricJs-限制主对象内添加对象的移动区域
- 如何从画布上的某个移动事件中获取X和Y
- JQuery 移动如何防止 li 项向右滑动
- li:在移动设备上悬停下拉菜单
- 当移动到最后一个li时,返回到第一个li(使用Jquery滚动到下一个)
- jQuery-基于类在UL中移动LI
- Html5和Css如何创建单独的ul-li并移动<旁白>向左
- JQuery ul li点击移动到列表中的下五个元素
- 禁用移动li锚
- 按字符串名称移动下拉列表中li的位置
- 改变li高度会移动父高度
- 如何将具有特定css样式的所有li元素移动到另一个ul中?
- 如何在 Javascript 中的最后一个 li 之后移动创建的 li
- 移动到UL内部并更改LI类,如果有.has_children类
- 上下移动Ul-Li中的项目
- 当 ul-li 切换时,数据表会移动