当前位置: 首页 > 编程笔记 >

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

杜英叡
2023-03-14
本文向大家介绍jQuery手机浏览器中拖拽动作的艰难性分析,包括了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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍支持IE,firefxo,chrome浏览器下鼠标拖动和拖拽的鼠标指针特效,包括了支持IE,firefxo,chrome浏览器下鼠标拖动和拖拽的鼠标指针特效的使用技巧和注意事项,需要的朋友参考一下 核心代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

  • 本文向大家介绍js判断手机浏览器操作系统和微信浏览器的方法,包括了js判断手机浏览器操作系统和微信浏览器的方法的使用技巧和注意事项,需要的朋友参考一下 今天就为大家介绍一下用js判断手机客户端平台及系统平台的方法: 注意上面的代码使用了jquery。需要加载jquery才可以运行。当然你可以把触发函数给删除了 在这里就不做pc端操作系统平台的判断了,怎么判断也说下方法,如用document.wri

  • 问题内容: 在调试用于移动Safari的Web应用程序时遇到了一个问题。该Web应用程序是相当复杂的服务器端仿真工具的前端。Web应用程序的工作原理概述如下: 向用户显示一个屏幕,在屏幕上他们填写要执行的模拟的值。 用户单击“运行模拟”,此时将对服务器进行AJAX调用。页面上的状态窗格将更新,指示正在运行模拟。一个php脚本使用POSTed值运行模拟器,并发送回一些javascript以首先更新状

  • 本章教程,讲的是 PyQt6 中的拖拽操作。 计算机图形界面中,拖拽操作是点击一个对象不放,把它放在另外一个地方或者另外一个对象上面的操作。一半来说,这会触发很多类型的行为,或者在两个对象上建立多种关系。 在计算机图形用户界面中,拖放是(或支持)点击虚拟对象并将其拖到不同位置或另一个虚拟对象上的动作。 一般来说,它可以用来调用多种动作,或者在两个抽象对象之间创建各种类型的关联。 拖放是图形界面的一

  • 我添加了Sha-1和Sha-256指纹,还添加了以下依赖项 实现平台('com.google.firebase:firebase bom:26.3.0')实现'com。谷歌。firebase:firebase auth' 并且还在云控制台中启用了Android设备验证API。 使用firebase phone auth时仍会打开浏览器-请帮助

  • 作为考试准备的一部分,我一直在努力解决问题,我想我需要你的帮助。我需要写一个布尔方法,需要整数数组(正和负),并返回true,如果数组可以被拆分为两个相等的组,每个组的数字的量等于另一组。对于示例,对于这个数组: 该方法将返回true,因为-3514=12-913。 对于此阵列: 该方法将返回false,因为即使-3 5 14 -12 = -9 13,等式每边的数字量也不相等。 对于阵列: 该方法