jQuery UI draggable(拖动)兼容移动端并且模拟click点击事件,兼容安卓
2017-07-04 21:19
791 查看
用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问题就不多展开了,直接上代码,拿以前的版本改的:
使用的时候,在原来要用click的地方改成这样
直接在touchend的时候判断一下之前手指在屏幕上划过的距离,小于5像素的为点击,大于5像素的就是滑动。修改第一行像素值可以调节一下敏感度。
Jquery UI中文官网
jQuery UI Touch Punch下载点这里 。
这样组合后在手机上测试基本完美,不过很快发现在安卓手机上,无论是原生浏览器还是微信内置浏览器上,都无法在draggable的元素上执行click点击事件,其子元素也不行;在iOS上倒是一切正常。经过排查,发现其实并非click事件不能执行,而是安卓上对touch的敏感度实在太大,太容易覆盖掉click事件,其实快速的多点几次click还是有一定概率能执行的。但这样显然不符合项目的要求了,于是我考虑用touchstart-touchmove-touchend来做一些代替click的事。其实就是判断一下手指滑动的距离,距离大的就什么都不变,当做滑动,距离小的就当作click事件去做点击的事。
这种low问题就不多展开了,直接上代码,拿以前的版本改的:
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的地方改成这样
$('#elementID').on("touchend",function(){ if(getIsTouch()){ //do things } });
直接在touchend的时候判断一下之前手指在屏幕上划过的距离,小于5像素的为点击,大于5像素的就是滑动。修改第一行像素值可以调节一下敏感度。
Jquery UI中文官网
相关文章推荐
- 让jQuery UI draggable兼容移动端
- jQuery Easy UI Draggable(拖动)组件
- jQuery UI draggable 事件冲突处理
- jQuery Ui Draggable在移动端浏览器不起作用解决方案
- jquery-ui-处理拖动位置Droppable,Draggable
- 让 jQuery UI draggable 适配移动端
- jQuery UI draggable 拖动参数集合参考
- jquery.ui初探__基于draggable()和droppable()的鼠标拖动选择器
- jquery.ui.draggable中文文档.
- jquery.ui.draggable中文文档
- jquery-UI学习笔记1之拖拽(Draggable)
- jquery.ui.draggable中文文档
- Jquery ui draggable在chrome和ie7下的bug
- android开发模拟click点击事件
- JQuery UI Draggable插件详细使用说明
- jquery ui selectable中click事件无效
- Jquery-ui draggable
- jquery.ui.draggable中文文档jquery 自由拖拽类~study~
- jquery点击内层的click事件时会触发外层的click事件
- jquery.ui.draggable中文文档