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

更新時間：2015年02月04日 10:26:41 作者：yongh701

這篇文章主要介紹了jQuery手機瀏覽器中拖拽動作的艱難性分析,實例分析了常見的jQuery手機瀏覽器中拖拽動作解決方案,具有一定參考借鑒價值,需要的朋友可以參考下

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

本想在手機網(wǎng)頁中實現(xiàn)一個如iphone可以隨意拖動的控制按鈕的，但是最后發(fā)現(xiàn)竹籃打水一場空，

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

先來看看在PC網(wǎng)頁中，拖拽動作是怎么做的，

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

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

首先，要把灰色圖層的position屬性變?yōu)閍bosulte，之后在jquery腳本要實現(xiàn)的工作要點，是區(qū)分click與mousedown+mouseup這一對動作，因為click本來就等于mousedown+mouseup，但是還好，mousedown一段時間時候，馬上unbind清空圖層對cilck動作的綁定，告訴系統(tǒng)，mousedown之后的動作與click無關，見如下現(xiàn)實代碼：

復制代碼代碼如下:

<!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實現(xiàn)長按按鈕觸發(fā)事件的方法】一文一樣，防止瀏覽器中，涂黑躲過mouseup判定的bug。
以上看起來非常地完美，因為在PC各大瀏覽器測試通過，還完美兼容IE8，實在是美如畫，

但是，一到手機中就問題大了，

僅僅在google瀏覽器中手機調(diào)試模式中，還沒有到真機上了，就無法使用了！

jquery的點擊事件在手機瀏覽器中是沒有任何問題的，但是，長按事件卻與手機上系統(tǒng)自帶的右鍵功能發(fā)生了沖突，即使換成jquery mobile中的.on("taphold",function (){});事件或者是在上面的mousedown中加入e.preventDefault();IE則用window.event.preventDefault();I禁用手機瀏覽器的自帶的菜單，也只能使長按的功能留存，拖拽是不用想了，因為拖拽最主要的函數(shù)就是mousemove動作，手機瀏覽器上根本就不支持mousemove()動作。

于是，有人提出抗議了，可以用jquery ui中的.draggable()與jquerymobile中的swipe事件，實在html5中的拖拽事件??！

然而，上述所有的解決方案都是徒勞無功，

對于jquery ui中的.draggable()，jquerymobile中的swipe事件，html5中的拖拽事件可以用瀏覽器的手機調(diào)試模式，發(fā)現(xiàn)根本就沒法拖。

希望本文所述對大家的jquery程序設計有所幫助。

您可能感興趣的文章: