jQuery在手机浏览器中实现拖拽功能的难点分析

jQuery手机浏览器拖拽功能实现难点分析

本文通过实例深入分析jQuery在手机浏览器环境下实现拖拽操作的复杂性，旨在为开发者提供有价值的参考。

最初设想在手机网页中复刻类似iPhone系统中可自由拖动的控制按钮效果，但最终发现这一目标难以达成。

尽管拖拽交互在手机浏览器中已十分普遍，但要真正开发出可被用户拖拽的组件，目前仍面临巨大技术障碍。

PC端拖拽实现逻辑

首先回顾PC网页中拖拽功能的常规实现逻辑。

假设存在一个按钮，点击可触发特定动作，若用户长按不放，则该按钮可被自由拖动，模拟iPhone控制按钮的交互体验。

如上图所示的灰色图层，其HTML结构编写并非难事。

关键在于CSS设置，需将灰色图层的position属性设为absolute。随后在jQuery脚本中，核心工作在于区分普通click事件与mousedown加mouseup的组合动作。虽然click在逻辑上等同于mousedown后紧跟mouseup，但可以通过在mousedown触发后短时间内解除对click事件的绑定，从而向系统表明后续动作与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();）来禁用手机浏览器的自带菜单，也仅能保留长按功能，拖拽依然无法实现。这是因为拖拽的核心依赖于mousemove事件，而手机浏览器根本不支持mousemove()动作。

对此，有人提出可以使用jQuery UI中的.draggable()方法，或jQuery Mobile中的swipe事件，亦或是HTML5原生的拖拽事件作为替代方案。

然而，事实证明上述所有尝试均告失败。

通过浏览器手机调试模式观察，无论是jQuery UI的.draggable()、jQuery Mobile的swipe事件，还是HTML5拖拽事件，在移动端均无法实现真正的拖拽效果。

希望本文的探讨能对从事jQuery程序设计的开发者有所帮助。