让jQuery UI draggable兼容移动端并且模拟click点击事件，兼容安卓

| 1 条评论 | 7,927 人已阅
本站所有文章均为博主人工写作，绝无AI辅助成分，请放心参阅。

用jQyery UI的draggable可以很方便地在PC端实现页面元素的可拖放，不过jQyery UI不是为移动端而写的，因此这个draggable方法在手机上无效。这么普通的问题，当然已经有了现成的解决方法，那就是再加一个jQuery UI Touch Punch插件即可。jQuery UI Touch Punch下载点这里。

这样组合后在手机上测试基本完美，不过很快发现在安卓手机上，无论是原生浏览器还是微信内置浏览器上，都无法在draggable的元素上执行click点击事件，其子元素也不行；在iOS上倒是一切正常。经过排查，发现其实并非click事件不能执行，而是安卓上对touch的敏感度实在太大，太容易覆盖掉click事件，其实快速的多点几次click还是有一定概率能执行的。但这样显然不符合项目的要求了，于是我考虑用touchstart-touchmove-touchend来做一些代替click的事。其实就是判断一下手指滑动的距离，距离大的就什么都不变，当做滑动，距离小的就当作click事件去做点击的事。

这种low问题就不多展开了，直接上代码，拿以前的版本改的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var touchValue = {x:5,y:5,sx:0,sy:0,ex:0,ey:0}; //initialize the touch values
window.addEventListener("touchstart",function(){
	var event=event || window.event;
	touchValue.sx = event.targetTouches[0].pageX;
	touchValue.sy = event.targetTouches[0].pageY;
	touchValue.ex = touchValue.sx;
	touchValue.ey = touchValue.sy;
});
window.addEventListener("touchmove", function(event){
	var event=event || window.event;
	event.preventDefault();
	touchValue.ex = event.targetTouches[0].pageX;
	touchValue.ey = event.targetTouches[0].pageY;
});
window.addEventListener("touchend", function(event){
	var event=event || window.event;
	var changeX = touchValue.ex - touchValue.sx;
	var changeY = touchValue.ey - touchValue.sy;
	//console.log("X:"+changeX+" Y:"+changeY);
	window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 
});
function getIsTouch(){
	var changeX = touchValue.ex - touchValue.sx;
	var changeY = touchValue.ey - touchValue.sy;
	if(Math.abs(changeX)<=touchValue.x&&Math.abs(changeY)<=touchValue.y){
		return true
	}else return false
}

使用的时候，在原来要用click的地方改成这样

1
2
3
4
5

$('#elementID').on("touchend",function(){
	if(getIsTouch()){
		//do things
	}	
});

直接在touchend的时候判断一下之前手指在屏幕上划过的距离，小于5像素的为点击，大于5像素的就是滑动。修改第一行像素值可以调节一下敏感度。

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/1452.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。

相关文章

1 关于 “让jQuery UI draggable兼容移动端并且模拟click点击事件，兼容安卓” 的评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注