文章來(lái)源：http://www.pin5i.com/showtopic-22447.html
實(shí)現方法一：
<!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>
<title> 鼠標拖動(dòng)層(可任意綁定DIV標簽)（一） </title>
<script language="javascript" type="text/javascript">
/*
鼠標拖動(dòng)層(可任意綁定DIV標簽)（一）
作者:Anlige
聯(lián)系方式:1034555083/zhanghuiguoanlige@126.com
調用方法:var myDrag=new Endrag(source,target,offSetX, offSetY);
參數說(shuō)明:source--鼠標動(dòng)作綁定對象;target--操作目標對象(要移動(dòng)的對象);offSetX--橫坐標偏移;offSetY--縱坐標偏移
說(shuō)明:通過(guò)多次調用本方法綁定多個(gè)對象的拖動(dòng)
*/
funs={
index:100,
getFocus:function (target){
if(target.style.zIndex!=this.index){
this.index += 2;
var idx = this.index;
target.style.zIndex=idx;
}
},
abs:function (element) {
var result = { x: element.offsetLeft, y: element.offsetTop};
element = element.offsetParent;
while (element) {
result.x += element.offsetLeft;
result.y += element.offsetTop;
element = element.offsetParent;
}
return result;
}
};
function Endrag(source,target,offSetX, offSetY){
source=typeof(source)=="object" ? source:document.getElementById(source);
target=typeof(target)=="object" ? target:document.getElementById(target);
var x0=0,y0=0,x1=0,y1=0,moveable=false,index=100,NS=(navigator.appName=='Netscape');
offSetX=typeof offSetX== "undefined" ? 0:offSetX;
offSetY=typeof offSetY== "undefined" ? 0:offSetY;
source.onmousedown=function(e){
e = e ? e : (window.event ? window.event : null);
funs.getFocus(target);
if(e.button==(NS)?0 :1) {
if(!NS){this.setCapture()}
x0 = e.clientX ;
y0 = e.clientY ;
x1 = parseInt(funs.abs(target).x);
y1 = parseInt(funs.abs(target).y);
moveable = true;
}
};
//拖動(dòng);
source.onmousemove=function(e){
e = e ? e : (window.event ? window.event : null);
if(moveable){
target.style.left = (x1 + e.clientX - x0 - offSetX) + "px";
target.style.top = (y1 + e.clientY - y0 - offSetY) + "px";
}
};
//停止拖動(dòng);
source.onmouseup=function (e){
if(moveable) {
if(!NS){this.releaseCapture();}
moveable = false;
}
};
}
</script>
</head>
<body onload="var i=new Endrag('hand','MoveDiv',0,0);var j=new Endrag('Div1','Div1',0,0);">
<div id="MoveDiv" style="position:absolute;left:200px;top:50px;width:400px;height:200px;border:1px #dddddd solid;">
<div id="hand" style="line-height:25px;text-align:center;background:#f00">
這個(gè)用子標簽操作父標簽
</div>
調用方法<br />var i=new Endrag('hand','MoveDiv',0,0);<br />
第一個(gè)參數為源標簽對象或對象id屬性；第二個(gè)參數為要移動(dòng)的目標對象或對象id屬性；第3、4個(gè)參數為偏移值，供最后調整用;<br />
鼠標指針在紅色區域才有效
</div>
<div id="Div1" style="background:#ffffff;position:absolute;left:400px;top:300px;width:300px;height:200px;border:1px #dddddd solid;">
<div id="Div2" style="line-height:25px;text-align:center;background:#f00">
這個(gè)用自標簽操作自己
</div>
調用方法<br />var j=new Endrag('Div1','Div1',0,0);<br />
第一個(gè)參數為源標簽對象或對象id屬性；第二個(gè)參數為要移動(dòng)的目標對象或對象id屬性；第3、4個(gè)參數為偏移值，供最后調整用；<br />
鼠標指針在Div1標簽內就有效
</div>
</body>
</html>
實(shí)現方法二：
調用方法
Endrag.bind('MoveDiv').bind('Div1').offSet({x:0,y:0});
通過(guò)多次調用bind方法可以綁定任意多個(gè)Div標簽;
offSet設置偏移，默認x偏移和y偏移都為0,供調整使用
本方法不能通過(guò)子元素綁定操作父元素
<!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>
<title> 鼠標拖動(dòng)層(可任意綁定DIV標簽)（二） </title>
<script language="javascript" type="text/javascript">
/*
鼠標拖動(dòng)層(可任意綁定DIV標簽)（一）
作者:Anlige
聯(lián)系方式:1034555083/zhanghuiguoanlige@126.com
調用方法:Endrag.bind('MoveDiv').bind('Div1').offSet({x:0,y:0});
參數說(shuō)明:bind的參數為Div標簽的ID屬性或者Div對象本身；offSet的參數為偏移量，默認(不調用本方法)x,y偏移都為0
說(shuō)明:通過(guò)多次調用bind方法綁定多個(gè)對象的拖動(dòng)
*/
Endrag={
x0:0,y0:0,x1:0,y1:0,moveable:false,index:100,NS:(navigator.appName=='Netscape'),offSets:{x:0,y:0},
//開(kāi)始拖動(dòng);
startDrag:function (e){
e = e ? e : (window.event ? window.event : null);
Endrag.getFocus(this);
if(e.button==(Endrag.NS)?0 :1) {
if(!Endrag.NS){this.setCapture()}
Endrag.x0 = e.clientX ;
Endrag.y0 = e.clientY ;
Endrag.x1 = parseInt(Endrag.abs(this).x);
Endrag.y1 = parseInt(Endrag.abs(this).y);
Endrag.moveable = true;
}
},
//拖動(dòng);
drag:function (e){
e = e ? e : (window.event ? window.event : null);
if(Endrag.moveable){
this.style.left = (Endrag.x1 + e.clientX - Endrag.x0 - Endrag.offSets.x) + "px";
this.style.top = (Endrag.y1 + e.clientY - Endrag.y0 - Endrag.offSets.y) + "px";
}
},
//停止拖動(dòng);
stopDrag:function (e){
if(Endrag.moveable) {
if(!Endrag.NS){this.releaseCapture();}
Endrag.moveable = false;
}
},
//獲得焦點(diǎn);
getFocus:function (obj){
if(obj.style.zIndex!=this.index){
this.index += 2;
var idx = this.index;
obj.style.zIndex=idx;
}
},
abs:function (element) {
var result = { x: element.offsetLeft, y: element.offsetTop};
element = element.offsetParent;
while (element) {
result.x += element.offsetLeft;
result.y += element.offsetTop;
element = element.offsetParent;
}
return result;
},
offSet:function(setting){
this.offSets=setting;
},
bind:function(obj){
obj=typeof(obj)=="object" ? obj:document.getElementById(obj);
obj.onmousedown=Endrag.startDrag;
obj.onmouseup=Endrag.stopDrag;
obj.onmousemove=Endrag.drag;
return this;
}
};
</script>
</head>
<body onload="Endrag.bind('MoveDiv').bind('Div1').offSet({x:0,y:0});">
<div id="MoveDiv" style="background:#ffffff;position:absolute;left:200px;top:50px;width:500px;height:200px;border:1px #dddddd solid;">
<div id="hand" style="line-height:25px;text-align:center;background:#f00">
拖動(dòng)層
</div>
調用方法<br />
Endrag.bind('MoveDiv').bind('Div1').offSet({x:0,y:0});<br />
可以綁定任意多個(gè)Div標簽;<br />offSet設置偏移，默認x偏移和y偏移都為0,供調整使用<br />
本方法不能通過(guò)子元素綁定操作父元素
</div>
<div id="Div1" style="background:#ffffff;position:absolute;left:400px;top:300px;width:300px;height:200px;border:1px #dddddd solid;">
<div id="Div2" style="line-height:25px;text-align:center;background:#f00">
拖動(dòng)層
</div>
</div>
</body>
</html>
