javascript代码实例教程-jQuery手机浏览器中拖拽动作的艰难性分析
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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>
<p id="myp" style="width:100px; height:100px; background:#999; position:absolute;">out</p>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
VAR timeout ;
$("#myp").mousedown(function(e) {
/*相当于mousedown之后立即进行判断，到底用户有没有按下超过1秒，有则判定为长按*/
$("#myp").click(function() {
$("#myp").text("被点击");
});
timeout = setTimeout(function() {
$("#myp").text("长按");
/*以下的语句之后，用户鼠标左键放起，则不会判定为click动作*/
$("#myp").unbind("click");
$("#myp").mouSEMove(function (e) {
/*这里是为了鼠标拖拽图层移动的时候，鼠标刚好在图层中间*/
document .getElementById("myp").style.left = e.pageX-50 + "px";
document .getElementById("myp").style.top = e.pageY-50 + "px";
});
}, 1000)
});
$("#myp").mouseup(function() {
clearTimeout(timeout);
/*这里必须清空mousemove动作，否则图层会永远绑定mousemove动作，随着鼠标移动而移动*/
$("#myp").unbind("mousemove");
$("#myp").text("out");
});
$("#myp").mouseout(function() {
clearTimeout(timeout);
$("#myp").unbind("mousemove");
$("#myp").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中的拖拽事件可以用浏览器的手机调试模式，发现根本就没法拖。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery手机浏览器中拖拽动作的艰难性分析全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery手机浏览器中拖拽动作的艰难性分析所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 前端学java系列（1）——搭建环境 2019-11-04
- JavaScript教程- JavaScript 语句 2018-11-21
- JavaScript教程- JavaScript 语法 2018-11-20
- JavaScript教程- JavaScript 输出 2018-11-20
- JavaScript教程- JavaScript 用法 2018-11-20
- JavaScript教程- JavaScript 简介 2018-11-20
- 重温java基础 2018-11-20
- 了解JavaScript中的Spread运算符 2018-11-17
- js数组操作常用方法超级完整版本值得收藏 2018-11-16
- 谷歌JavaScript风格指南中值得注意的13点 2018-11-11
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件
- javascript代码实例教程-Extjs4――实现动态的grid（即实现数据库表数据的显示）
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- vue项目优化--服务端渲染优化
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件