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 相关文章推荐
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
jquery 插件学习(一)
Aug 06 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 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
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
php 缓存函数代码
2008/08/27 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
小程序自定义弹框效果
2020/11/16 Javascript
简单理解Python中的装饰器
2015/07/31 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
pandas多级分组实现排序的方法
2018/04/20 Python
tensorflow如何批量读取图片
2019/08/29 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
用Python 执行cmd命令
2020/12/18 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
天网面试题
2013/04/07 面试题
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
小学生演讲稿
2014/01/12 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
2015年安全月活动总结
2015/03/26 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
小学班主任工作随笔
2015/08/15 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python