首页 > 代码库 > 【jQuery】论手机浏览器中拖拽动作的艰难性

【jQuery】论手机浏览器中拖拽动作的艰难性

2024-08-05 23:49:32   220人阅读

本来标题是《论手机浏览器中拖拽动作的不可能性》的，但是想了想还是改成艰难性，避免过于绝对

本想在手机网页中实现一个如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=http://www.mamicode.com/"js/jquery-1.11.1.js"></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】论手机浏览器中拖拽动作的艰难性


联系
我们