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

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

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

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

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

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

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

首先，要把灰色图层的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程序设计有所帮助。

赞 (0)

相关推荐

  • 两款JS脚本判断手机浏览器类型跳转WAP手机网站

    随着移动设备的普及,企业的网络宣传已经不能局限在PC端,而需要同时在移动端有所建树.对于公司网站来说,以前都是做的PC端的,当然手机等移动端也可以访问,但是用户体验肯定不如完全适合的手机端来的方便.我们在给自己的网站做了WAP手机网站之后,如果有用户通过手机访问我们的企业顶级域名网站,那就判断跳转到专为的WAP网站. 这里老左整理到目前自己在使用的2种JS脚本,因为之前一直有朋友跟我要,所以这里分享出来. 第一种:直接JS脚本 <script type="text/javascript&q

  • php判断手机浏览还是web浏览,并执行相应的动作简单实例

    正好需要,在网上找了好久,记录一下 function isMobile(){ $useragent=isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : ''; $useragent_commentsblock=preg_match('|\(.*?\)|',$useragent,$matches)>0?$matches[0]:''; function CheckSubstrs($substrs,$text){ for

  • js判断手机浏览器操作系统和微信浏览器的方法

    今天就为大家介绍一下用js判断手机客户端平台及系统平台的方法: <script type="text/javascript"> //手机端判断各个平台浏览器及操作系统平台 function checkPlatform(){ if(/android/i.test(navigator.userAgent)){ document.write("This is Android'browser.");//这是Android平台下浏览器 } if(/(iPhonei

  • JS脚本根据手机浏览器类型跳转WAP手机网站（两种方式）

    随着移动互联网的不断普及,企业的网络宣传不仅只局限在PC端,还要在移动端发展.我们在自己的网站做了WAP手机完整之后,如果有用户通过手机访问我们的企业顶级域名网站,就要判断跳转到专为的WAP网站,下面小编通过两种方式介绍根据手机浏览器类型跳转WAP手机网站,具体内容如下. 第一种方式:直接JS脚本 <script type="text/javascript"> try { var urlhash = window.location.hash; if (!urlhash.ma

  • 通过JS自动隐藏手机浏览器的地址栏实现原理与代码

    通过JS自动隐藏手机浏览器的地址栏实现原理与代码

    大家通过手机自带浏览器打开百度.淘宝,在首页加载完毕后,会自动隐藏页面上方的地址栏,加之这些网站针对手机浏览器做了优化,乍看之下,还真难区分这是WEB APP还是Native App,如下左侧图片为通过safari打开淘宝网的首页,要不是因为底下的浏览器工具栏,还真像Native App.实际上它是有地址的,向下拖动就会看到地址栏,如下右侧图片. 如何才能实现将浏览器地址栏隐藏呢?百度一下,有很多资料,很简单,主要利用window.scrollTo()方法,将当前页面在屏幕上向上滚动,造成地址栏

  • 如何解决手机浏览器页面点击不跳转浏览器双击放大网页

    手机端web网页项目 1,angluar js 1.4.6 网页项目开发过程中,使用PC浏览器能正常访问,IOS设备浏览器也能正常访问,但是使用Android部分浏览器进行访问的时候,链接偶尔不跳转,点击完没有任何反应(本人使用angluar js route进行单页面应用跳转),此时地址栏的路径已经被更新为点击后的地址,并且双击页面网页会放大(顺着这个现象去找到了问题) 现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大? 解决方案: 可以在页面头部加上meta

  • 使用JavaScript判断手机浏览器是横屏还是竖屏问题

    //判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") } if(window.orientation==90||window.orientation==-90){ alert("横屏状态!") } } window.addEventListener("onorientationchange" i

  • JS 动态判断PC和手机浏览器实现代码

    这个只是一个小知识,也是在网上找的,挺好用! 动态判断浏览器是PC还是移动端! <script> var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit

  • 手机浏览器 后退按钮强制刷新页面方法总结

    由于A界面的数据是通过ajax交互的,当你跳转到B界面,点击手机浏览器自带的后退回到A界面,由于缓存原因,读取到的数据不是最新的数据. 查了很多资料,看到网上的解决方法是清理缓存,然后页面重新向服务器发出请求. 下面整理一下,解决这个问题的方法. 方法1,HTML头部,禁止缓存: <meta http-equiv="Expires" CONTENT="0"> <meta http-equiv="Cache-Control" CO

  • 微信或手机浏览器在线显示office文件（已测试ios、android）

    最近开发微信企业号,发现微信andriod版内置浏览器在打开文件方面有问题,但是ios版没有问题,原因是ios版使用的是safari浏览器 支持文档直接打开,但是andriod版使用的是腾讯浏览器x5内核,不知道什么原因不支持,可能是集成出现的问题,这里提供解决方法,这种方法也同样适用手机浏览器或者安卓开发.通过此方法可以在微信上开发自己的第三方应用,或者解决自己的项目问题,解决方法及核心代码如下: 1.判断浏览器类型 HttpServletRequest req = ServletAction

随机推荐