經曆了好一段的調試，終于調出了相容IE、Firefox的滑鼠拖動層。源碼附上。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Binny.cn</title>
<script>
var obj=0;
var x=0;
var y=0;
var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE
var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox
function find(evt,objDiv)...{
obj = objDiv
if (ff)...{
x = document.documentElement.scrollLeft + evt.layerX;
y = document.documentElement.scrollTop + evt.layerY;
if (document.documentElement.scrollTop > 0)...{
y = evt.layerY - document.documentElement.scrollTop;
}
if (document.documentElement.scrollLeft > 0)...{
x = evt.layerX - document.documentElement.scrollLeft;
}
if (ie)...{
x = document.documentElement.scrollLeft + evt.offsetX;
y = document.documentElement.scrollTop + evt.offsetY;
y = evt.offsetY - document.documentElement.scrollTop;
x = evt.offsetX - document.documentElement.scrollLeft;
}
function dragit(evt)...{
if(obj == 0)...{
return false
}
else...{
obj.style.left = evt.clientX - x + "px";
obj.style.top = evt.clientY - y + "px";
</script>
</head>
<body style="margin:0" onmousemove="dragit(event)" onmouseup="obj = 0">
<div id="aaa" style="background-color:red;width:200pt;height:200pt;position:absolute">
<div id="aa" style="width:200pt;height:20pt;background:blue;position:absolute" onmousedown="find(event,document.getElementById('aaa'))"></div>
</div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</body>
</html>
以下，是關于制作滑鼠拖動層的詳解：
解決思路
這個效果并不算常見，通常用于遊戲或個人站點中。因為拖曳是靠滑鼠來操作的，是以對滑鼠的位置的捕獲是問題的重點，然後才是根據滑鼠的位置設定層的位置。
具體步驟：
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，確定目前層顯示在最前面
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
obj.style.zIndex=z //還原對象的Z軸坐标值
obj.releaseCapture() //釋放目前對象的滑鼠捕捉
</script>
<div οnmοusedοwn=init() οnmοusemοve=moveit() οnmοuseup=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 οnmοusedοwn=init() οnmοusemοve=moveit() οnmοuseup=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 οnmοusedοwn=init() οnmοusemοve=moveit() οnmοuseup=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 為一個或多個語句設定預設對象。