jQuery手机浏览器中拖拽动作的艰难性分析


Posted in Javascript onFebruary 04, 2015

本文实例分析了jQuery手机浏览器中拖拽动作的艰难性。分享给大家供大家参考。具体如下:

本想在手机网页中实现一个如iphone可以随意拖动的控制按钮的,但是最后发现竹篮打水一场空,

虽然拖拽动作在手机浏览器中司空见惯,但是在手机浏览器中,要想实现可以被拖拽的组件,却是一件不可能的事情。

先来看看在PC网页中,拖拽动作是怎么做的,

首先,我们有一个按钮,点击有动作,一直按着不放,可以随意拖动,就像iphone可以随意拖动的控制按钮一样,

jQuery手机浏览器中拖拽动作的艰难性分析

如上图的灰色图层,写出来也不甚容易,

首先,要把灰色图层的position属性变为abosulte,之后在jquery脚本要实现的工作要点,是区分click与mousedown+mouseup这一对动作,因为click本来就等于mousedown+mouseup,但是还好,mousedown一段时间时候,马上unbind清空图层对cilck动作的绑定,告诉系统,mousedown之后的动作与click无关,见如下现实代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>jqdrag</title>  

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">  

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>  

</head>  

  

<body>  

<div id="mydiv" style="width:100px; height:100px; background:#999; position:absolute;">out</div>  

</body>  

</html>  

<script type="text/javascript">  

$(document).ready(function() {  

var timeout ;  

      

    $("#mydiv").mousedown(function(e) {  

        /*相当于mousedown之后立即进行判断,到底用户有没有按下超过1秒,有则判定为长按*/  

        $("#mydiv").click(function() {  

            $("#mydiv").text("被点击");  

        });  

        timeout = setTimeout(function() {  

            $("#mydiv").text("长按");  

            /*以下的语句之后,用户鼠标左键放起,则不会判定为click动作*/  

            $("#mydiv").unbind("click");  

            $("#mydiv").mousemove(function (e) {  

                /*这里是为了鼠标拖拽图层移动的时候,鼠标刚好在图层中间*/  

                document .getElementById("mydiv").style.left = e.pageX-50 + "px";  

                document .getElementById("mydiv").style.top = e.pageY-50 + "px";  

            });   

        }, 1000)          

    });  

          

    $("#mydiv").mouseup(function() {  

        clearTimeout(timeout);  

        /*这里必须清空mousemove动作,否则图层会永远绑定mousemove动作,随着鼠标移动而移动*/  

        $("#mydiv").unbind("mousemove");  

        $("#mydiv").text("out");      

    });   

          

    $("#mydiv").mouseout(function() {  

        clearTimeout(timeout);  

        $("#mydiv").unbind("mousemove");  

        $("#mydiv").text("out");  

    });  

});  

</script>

之所以还要编写mouseout事件,与之前的【jQuery实现长按按钮触发事件的方法】一文一样,防止浏览器中,涂黑躲过mouseup判定的bug。
以上看起来非常地完美,因为在PC各大浏览器测试通过,还完美兼容IE8,实在是美如画,

但是,一到手机中就问题大了,

仅仅在google浏览器中手机调试模式中,还没有到真机上了,就无法使用了!

jquery的点击事件在手机浏览器中是没有任何问题的,但是,长按事件却与手机上系统自带的右键功能发生了冲突,即使换成jquery mobile中的.on("taphold",function (){});事件或者是在上面的mousedown中加入e.preventDefault();IE则用window.event.preventDefault();I禁用手机浏览器的自带的菜单,也只能使长按的功能留存,拖拽是不用想了,因为拖拽最主要的函数就是mousemove动作,手机浏览器上根本就不支持mousemove()动作。

于是,有人提出抗议了,可以用jquery ui中的.draggable()与jquerymobile中的swipe事件,实在html5中的拖拽事件啊!

然而,上述所有的解决方案都是徒劳无功,

对于jquery ui中的.draggable(),jquerymobile中的swipe事件,html5中的拖拽事件可以用浏览器的手机调试模式,发现根本就没法拖。

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
详解JavaScript作用域 闭包
Jul 29 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 #Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 #Javascript
js对字符的验证方法汇总
Feb 04 #Javascript
AngularJS内置指令
Feb 04 #Javascript
javascript内置对象操作详解
Feb 04 #Javascript
js判断文本框剩余可输入字数的方法
Feb 04 #Javascript
javascript 兼容各个浏览器的事件
Feb 04 #Javascript
You might like
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
php自定义分页类完整实例
2015/12/25 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
vuex vue简单使用知识点总结
2019/08/29 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
详解Python验证码识别
2016/01/25 Python
python实现批量监控网站
2016/09/09 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
python中 logging的使用详解
2017/10/25 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
Python读取实时数据流示例
2019/12/02 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
2014年医药代表工作总结
2014/11/22 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
婚宴父亲致辞
2015/07/27 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
一些让Python代码简洁的实用技巧总结
2021/08/23 Python