本文實例分析了jQuery手機瀏覽器中拖拽動作的艱難性。分享給大家供大家參考。具體如下：
本想在手機網頁中實現一個如iphone可以隨意拖動的控制按鈕的，但是最后發現竹籃打水一場空，
雖然拖拽動作在手機瀏覽器中司空見慣，但是在手機瀏覽器中，要想實現可以被拖拽的組件，卻是一件不可能的事情。
先來看看在PC網頁中，拖拽動作是怎么做的，
首先，我們有一個按鈕，點擊有動作，一直按著不放，可以隨意拖動，就像iphone可以隨意拖動的控制按鈕一樣，
如上圖的灰色圖層，寫出來也不甚容易，
首先，要把灰色圖層的position屬性變為abosulte，之后在jquery腳本要實現的工作要點，是區分click與mousedown+mouseup這一對動作，因為click本來就等于mousedown+mouseup，但是還好，mousedown一段時間時候，馬上unbind清空圖層對cilck動作的綁定，告訴系統，mousedown之后的動作與click無關，見如下現實代碼：
之所以還要編寫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程序設計有所幫助。
新聞熱點
疑難解答
