欧美国产性爱,国产性色aV一区

javascript鼠標(biāo)拖動(dòng)層的JS方法

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2012年3月12日 14:2 本文熱度 4199

Javascript 如何實(shí)現(xiàn)對(duì)象的拖動(dòng)？
解決思路
     這個(gè)效果并不算常見(jiàn)，通常用于游戲或個(gè)人站點(diǎn)中。因?yàn)橥弦肥强渴髽?biāo)來(lái)操作的，所以對(duì)鼠標(biāo)的位置的捕獲是問(wèn)題的重點(diǎn)，然后才是根據(jù)鼠標(biāo)的位置設(shè)置層的位置。

具體步驟：
1.在對(duì)象(層)上按下鼠標(biāo)時(shí)，先捕獲到需要拖曳的對(duì)象，然后獲取或設(shè)置該對(duì)象的相關(guān)屬性。

obj=event.srcElement
obj.setCapture()
z=obj.style.zIndex
obj.style.zIndex=100
x=event.offsetX
y=event.offsetY
down=true

2.開(kāi)始拖曳時(shí)，捕獲鼠標(biāo)當(dāng)前位置，并根據(jù)該數(shù)值設(shè)置被拖曳對(duì)象的位置。

obj.style.posLeft=document.body.scrollLeft+event.x-x
obj.style.posTop=document.body.scrollTop+event.y-y

3.拖曳完松開(kāi)鼠標(biāo)后，重設(shè)標(biāo)志 down ，還原對(duì)象的 z-index并釋放對(duì)它的鼠標(biāo)捕捉。

down=false
obj.style.zIndex=z
obj.releaseCapture()

4.完整代碼。

<script>
var x,y,z,down=false,obj
function init(){
obj=event.srcElement      //事件觸發(fā)對(duì)象
obj.setCapture()             //設(shè)置屬于當(dāng)前對(duì)象的鼠標(biāo)捕捉
z=obj.style.zIndex           //獲取對(duì)象的z軸坐標(biāo)值
//設(shè)置對(duì)象的z軸坐標(biāo)值為100，確保當(dāng)前層顯示在最前面
obj.style.zIndex=100
x=event.offsetX    //獲取鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的X坐標(biāo)
y=event.offsetY    //獲取鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的Y坐標(biāo)
down=true          //布爾值，判斷鼠標(biāo)是否已按下，true為按下，false為未按下
}

function moveit(){
//判斷鼠標(biāo)已被按下且onmouseover和onmousedown事件發(fā)生在同一對(duì)象上
if(down&&event.srcElement==obj){
    with(obj.style){
/*設(shè)置對(duì)象的X坐標(biāo)值為文檔在X軸方向上的滾動(dòng)距離加上當(dāng)前鼠標(biāo)指針相當(dāng)于文檔對(duì)象的X坐標(biāo)值減鼠標(biāo)按下時(shí)指針位置相對(duì)于觸發(fā)事件的對(duì)象的X坐標(biāo)*/

         posLeft=document.body.scrollLeft+event.x-x
/*設(shè)置對(duì)象的Y坐標(biāo)值為文檔在Y軸方向上的滾動(dòng)距離加上當(dāng)前鼠標(biāo)指針相當(dāng)于文檔對(duì)象的Y坐標(biāo)值減鼠標(biāo)按下時(shí)指針位置相對(duì)于觸發(fā)事件的對(duì)象的Y坐標(biāo)*/
         posTop=document.body.scrollTop+event.y-y
    }
}
}

function stopdrag(){
//onmouseup事件觸發(fā)時(shí)說(shuō)明鼠標(biāo)已經(jīng)松開(kāi)，所以設(shè)置down變量值為false
down=false
obj.style.zIndex=z        //還原對(duì)象的Z軸坐標(biāo)值
obj.releaseCapture() //釋放當(dāng)前對(duì)象的鼠標(biāo)捕捉
}
</script>

<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:20;top:190;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">Layer 1</div>
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:60;top:10;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">Layer 2</div>
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:100;top:90;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3</div>

注意：只有 CSS 的 position 屬性值為 absolute 的對(duì)象才能進(jìn)行拖動(dòng)操作。
提示：如果需要將拖曳組件化，可以參考第二部分HTC一節(jié)。
技巧：可以在 init() 函數(shù)中加一句 event.cancelBubble=true ，以取消在該對(duì)象上的事件冒泡。
試一試：讀者可以試著實(shí)現(xiàn)移動(dòng)其他對(duì)象，例如移動(dòng)一個(gè)圖片或文本框。
特別提示
在拖曳對(duì)象前必須確保該對(duì)象的為絕對(duì)定位的，把上面的完整代碼保存就可以看到效果了，在實(shí)際就用時(shí)務(wù)必在對(duì)象上加上 onmousedown、onmousemove和onmouseup三個(gè)事件并觸發(fā)相應(yīng)函數(shù)。代碼運(yùn)行效果如圖 3.8 所示。

圖 3.8 可拖動(dòng)的層

特別說(shuō)明

本例需要掌握的技巧比較多，捕捉鼠標(biāo)，獲取鼠標(biāo)位置(相當(dāng)于對(duì)象)，釋放鼠標(biāo)捕捉，文檔的滾動(dòng)距離還有with 語(yǔ)句。
1.        setCapture() 設(shè)置屬于當(dāng)前文檔的對(duì)象的鼠標(biāo)捕捉。
2.        event.offsetX 設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的 x 坐標(biāo)。
3.        event.offsetY 設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的 y 坐標(biāo)。
4.        releaseCapture() 釋放當(dāng)前文檔中對(duì)象的鼠標(biāo)捕捉。
5.        scrollLeft 設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見(jiàn)內(nèi)容的最左端之間的距離。
6.        scrollTop 設(shè)置或獲取位于對(duì)象最頂端和窗口中可見(jiàn)內(nèi)容的最頂端之間的距離。
7.        with 為一個(gè)或多個(gè)語(yǔ)句設(shè)定默認(rèn)對(duì)象。

以下這個(gè)方法做出來(lái)的比較好看，并增加了層的幾個(gè)功能
3個(gè)不同高度的三維可拖動(dòng)圖層的例子
=====================================================================

<html>
<head>
<title>_xWin</title>
<style type='text/css'>

</style>
<script language=JScript>

</script>
<script language='JScript'>

</script>
</head>
<body onselectstart='return false' oncontextmenu='return false'>
</body>
</html>

該文章在 2012/3/12 14:02:31 編輯過(guò)

關(guān)鍵字查詢

javascript

java

拖動(dòng)

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。

日韩欧美人妻无码精品白浆,www.大香蕉久久网,狠狠的日狠狠的操,日本好好热在线观看

javascript鼠標(biāo)拖動(dòng)層的JS方法