本文實例分析了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程序設計有所幫助。