jQuery手機(jī)瀏覽器中拖拽動(dòng)作的艱難性分析

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

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

本文實(shí)例分析了jQuery手機(jī)瀏覽器中拖拽動(dòng)作的艱難性。分享給大家供大家參考。具體如下：

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

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

先來(lái)看看在PC網(wǎng)頁(yè)中，拖拽動(dòng)作是怎么做的，

首先，我們有一個(gè)按鈕，點(diǎn)擊有動(dòng)作，一直按著不放，可以隨意拖動(dòng)，就像iphone可以隨意拖動(dòng)的控制按鈕一樣，

如上圖的灰色圖層，寫(xiě)出來(lái)也不甚容易，

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

復(fù)制代碼代碼如下:

<!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) {  

        /*相當(dāng)于mousedown之后立即進(jìn)行判斷，到底用戶有沒(méi)有按下超過(guò)1秒，有則判定為長(zhǎng)按*/  

        $("#mydiv").click(function() {  

            $("#mydiv").text("被點(diǎn)擊");  

        });  

        timeout = setTimeout(function() {  

            $("#mydiv").text("長(zhǎng)按");  

            /*以下的語(yǔ)句之后，用戶鼠標(biāo)左鍵放起，則不會(huì)判定為click動(dòng)作*/  

            $("#mydiv").unbind("click");  

            $("#mydiv").mousemove(function (e) {  

                /*這里是為了鼠標(biāo)拖拽圖層移動(dòng)的時(shí)候，鼠標(biāo)剛好在圖層中間*/  

                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動(dòng)作，否則圖層會(huì)永遠(yuǎn)綁定mousemove動(dòng)作，隨著鼠標(biāo)移動(dòng)而移動(dòng)*/  

        $("#mydiv").unbind("mousemove");  

        $("#mydiv").text("out");      

    });   

    $("#mydiv").mouseout(function() {  

        clearTimeout(timeout);  

        $("#mydiv").unbind("mousemove");  

        $("#mydiv").text("out");  

    });  

});  

</script>

之所以還要編寫(xiě)mouseout事件，與之前的【jQuery實(shí)現(xiàn)長(zhǎng)按按鈕觸發(fā)事件的方法】一文一樣，防止瀏覽器中，涂黑躲過(guò)mouseup判定的bug。
以上看起來(lái)非常地完美，因?yàn)樵赑C各大瀏覽器測(cè)試通過(guò)，還完美兼容IE8，實(shí)在是美如畫(huà)，

但是，一到手機(jī)中就問(wèn)題大了，

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

jquery的點(diǎn)擊事件在手機(jī)瀏覽器中是沒(méi)有任何問(wèn)題的，但是，長(zhǎng)按事件卻與手機(jī)上系統(tǒng)自帶的右鍵功能發(fā)生了沖突，即使換成jquery mobile中的.on("taphold",function (){});事件或者是在上面的mousedown中加入e.preventDefault();IE則用window.event.preventDefault();I禁用手機(jī)瀏覽器的自帶的菜單，也只能使長(zhǎng)按的功能留存，拖拽是不用想了，因?yàn)橥献ё钪饕暮瘮?shù)就是mousemove動(dòng)作，手機(jī)瀏覽器上根本就不支持mousemove()動(dòng)作。

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

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

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

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: