国产精品第一页在线,人与动性欧美,真实国产乱子伦高清

javascript鼠標拖動層的JS方法

admin

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

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

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

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

2.開始拖曳時，捕獲鼠標當前位置，并根據該數值設置被拖曳對象的位置。

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

3.拖曳完松開鼠標后，重設標志 down ，還原對象的 z-index并釋放對它的鼠標捕捉。

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

4.完整代碼。

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

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

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

function stopdrag(){
//onmouseup事件觸發時說明鼠標已經松開，所以設置down變量值為false
down=false
obj.style.zIndex=z        //還原對象的Z軸坐標值
obj.releaseCapture() //釋放當前對象的鼠標捕捉
}
</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一節。
技巧：可以在 init() 函數中加一句 event.cancelBubble=true ，以取消在該對象上的事件冒泡。
試一試：讀者可以試著實現移動其他對象，例如移動一個圖片或文本框。
特別提示
在拖曳對象前必須確保該對象的為絕對定位的，把上面的完整代碼保存就可以看到效果了，在實際就用時務必在對象上加上 onmousedown、onmousemove和onmouseup三個事件并觸發相應函數。代碼運行效果如圖 3.8 所示。

圖 3.8 可拖動的層

特別說明

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

以下這個方法做出來的比較好看，并增加了層的幾個功能
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 編輯過

關鍵字查詢

javascript

java

拖動

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

javascript鼠標拖動層的JS方法