jQuery手機瀏覽器中拖曳動作的艱難性分析_jquery

本文實例分析了jQuery手機瀏覽器中拖曳動作的困難性。分享給大家供大家參考。具體如下：

本來想在手機網頁中實現一個如iphone可以隨意拖動的控制按鈕的，但是最後發現竹籃打水一場空，

雖然拖曳動作在手機瀏覽器中司空見慣，但是在手機瀏覽器中，要想實現可以被拖曳的組件，卻是一件不可能的事情。

先來看看在PC網頁中，拖曳動作是怎麼做的，

首先，我們有一個按鈕，點擊有動作，一直按著不放，可以隨意拖動，就像iphone可以隨意拖動的控制按鈕一樣，

如上圖的灰色圖層，寫出來也不甚容易，

首先，要把灰色圖層的position屬性變成abosulte，之後在jquery腳本要實現的工作要點，是區分click與mousedown mouseup這一對動作，因為click本來就等於mousedown mouseup，但是還好， mousedown一段時間時候，馬上unbind清空圖層對cilck動作的綁定，告訴系統，mousedown之後的動作與click無關，見如下現實代碼：

複製程式碼 程式碼如下:

 
 
 
 
jqdrag標題> 
 
 
頭> 
 
 

out

; 
正文> 
 
 
$(文檔).ready(function() { 
變數超時； 
     
    $("#mydiv").mousedown(function(e) { 
        /*相當於滑鼠按下之後立即判斷，到底使用者有沒有按下超過1秒，有則判定為長按*/ 
        $("#mydiv").click(function() { 
            $("#mydiv").text("點選"); 
        }); 
        逾時 = setTimeout(function() { 
            $("#mydiv").text("長按"); 
            /*下列語句之後，且使用者滑鼠左鍵放起，不會判為點選動作*/ 
            $("#mydiv").unbind("點選"); 
            $("#mydiv").mousemove(function (e) { 
                /*這裡是為了USB拖曳圖層移動的時候，裝置正好在圖層中間*/ 
                文檔 .getElementById("mydiv").style.left = e.pageX-50 "px"; 
                文檔 .getElementById("mydiv").style.top = e.pageY-50 "px"; 
            });  
        }, 1000)         
    }); 
         
    $("#mydiv").mouseup(function() { 
        清除逾時（逾時）； 
        /*這裡必須清空mousemove動作，否則圖層會永遠綁定mousemove動作，隨著滑鼠移動而移動*/ 
        $("#mydiv").unbind("mousemove"); 
        $("#mydiv").text("out");     
    });  
         
    $("#mydiv").mouseout(function() { 
        清除逾時（逾時）； 
        $("#mydiv").unbind("mousemove"); 
        $("#mydiv").text("out"); 
    }); 
}); 
腳本>

之所以還要寫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程式設計有所幫助。