好吊色永久免费网站,国产乱辈通伦在线观看,亚洲毛茸茸bbxx,亚洲日韩白丝,国产浪潮AV一区,亚洲无AV码一区二区三区,最近最好的中文字幕2019免费,国产自在自线午夜精品,中文字幕视频在线,国产精品高清一区二区三区不卡

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

admin

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

Javascript 如何實現(xiàn)對象的拖動？
解決思路
     這個效果并不算常見，通常用于游戲或個人站點中。因為拖曳是靠鼠標(biāo)來操作的，所以對鼠標(biāo)的位置的捕獲是問題的重點，然后才是根據(jù)鼠標(biāo)的位置設(shè)置層的位置。

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

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

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

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

3.拖曳完松開鼠標(biāo)后，重設(shè)標(biāo)志 down ，還原對象的 z-index并釋放對它的鼠標(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ā)對象
obj.setCapture()             //設(shè)置屬于當(dāng)前對象的鼠標(biāo)捕捉
z=obj.style.zIndex           //獲取對象的z軸坐標(biāo)值
//設(shè)置對象的z軸坐標(biāo)值為100，確保當(dāng)前層顯示在最前面
obj.style.zIndex=100
x=event.offsetX    //獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的X坐標(biāo)
y=event.offsetY    //獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的Y坐標(biāo)
down=true          //布爾值，判斷鼠標(biāo)是否已按下，true為按下，false為未按下
}

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

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

function stopdrag(){
//onmouseup事件觸發(fā)時說明鼠標(biāo)已經(jīng)松開，所以設(shè)置down變量值為false
down=false
obj.style.zIndex=z        //還原對象的Z軸坐標(biāo)值
obj.releaseCapture() //釋放當(dāng)前對象的鼠標(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 的對象才能進行拖動操作。
提示：如果需要將拖曳組件化，可以參考第二部分HTC一節(jié)。
技巧：可以在 init() 函數(shù)中加一句 event.cancelBubble=true ，以取消在該對象上的事件冒泡。
試一試：讀者可以試著實現(xiàn)移動其他對象，例如移動一個圖片或文本框。
特別提示
在拖曳對象前必須確保該對象的為絕對定位的，把上面的完整代碼保存就可以看到效果了，在實際就用時務(wù)必在對象上加上 onmousedown、onmousemove和onmouseup三個事件并觸發(fā)相應(yīng)函數(shù)。代碼運行效果如圖 3.8 所示。

圖 3.8 可拖動的層

特別說明

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

以下這個方法做出來的比較好看，并增加了層的幾個功能
3個不同高度的三維可拖動圖層的例子
=====================================================================

<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ān)鍵字查詢

javascript

java

拖動

相關(guān)文章

正在查詢...

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

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

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

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