<div style="position:absolute; top:200px; left:400px; width:58px; height:15px; border:1px #666666 solid; text-align:center; background-color:#CCCCCC; cursor:move" onMouseDown="getFocus(this)" onMouseUp="stopMove(this)" onMouseMove="move(this)">我要移动</div>
<script language="javascript">
var isMove = false;
var top = 0; left = 0; x0 = 0, y0 = 0;function getFocus(obj) {
obj.setCapture();
top = parseInt(obj.style.top);
left = parseInt(obj.style.left);
x0 = event.clientX;
y0 = event.clientY;
isMove = true;
}function stopMove(obj) {
isMove = false;
obj.releaseCapture();
}function move(obj) {
if (isMove) {
var x1 = event.clientX;
var y1 = event.clientY;
obj.style.top = (top + y1 - y0) + "px";
obj.style.left = (left + x1 - x0) + "px";
}
}
</script>
<script language="javascript">
var isMove = false;
var top = 0; left = 0; x0 = 0, y0 = 0;function getFocus(obj) {
obj.setCapture();
top = parseInt(obj.style.top);
left = parseInt(obj.style.left);
x0 = event.clientX;
y0 = event.clientY;
isMove = true;
}function stopMove(obj) {
isMove = false;
obj.releaseCapture();
}function move(obj) {
if (isMove) {
var x1 = event.clientX;
var y1 = event.clientY;
obj.style.top = (top + y1 - y0) + "px";
obj.style.left = (left + x1 - x0) + "px";
}
}
</script>
<HTML>
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="theme/Master.css" rel="stylesheet" type="text/css">
<TITLE>windowMove.html</TITLE>
<SCRIPT language="JavaScript">
<!--
var currentMoveObj = null;
var relLeft;
var relTop;
function f_mdown(obj)
{
currentMoveObj = obj;
currentMoveObj.setCapture();
currentMoveObj.style.position = "absolute";
relLeft = event.x - currentMoveObj.style.pixelLeft;
relTop = event.y -currentMoveObj.style.pixelTop;
}
window.document.attachEvent('onmouseup',function(){
if(currentMoveObj!=null){
currentMoveObj.releaseCapture();
currentMoveObj = null;
}
});
function f_move(obj)
{
if(currentMoveObj !=null)
{
currentMoveObj.style.pixelLeft = event.x-relLeft;
currentMoveObj.style.pixelTop = event.y - relTop;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE border="1" width="100" style="position:absolute;
left:50;top:50" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<TBODY>
<TR>
<TD bgcolor="#CCCCCC">head</TD>
</TR>
<TR>
<TD>content</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT>
</SCRIPT>
</BODY>
</HTML>
<script language="javascript">
var isMove = false;
var top = 0; left = 0; x0 = 0, y0 = 0;function getFocus(obj) {
obj.setCapture();
top = parseInt(obj.style.top);
left = parseInt(obj.style.left);
x0 = event.clientX;
y0 = event.clientY;
isMove = true;
}function stopMove(obj) {
isMove = false;
obj.releaseCapture();
}function move(obj) {
if (isMove) {
var x1 = event.clientX;
var y1 = event.clientY;
obj.style.top = (top + y1 - y0) + "px";
obj.style.left = (left + x1 - x0) + "px";
}
}
</script>
<!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> 鼠标拖动层(可任意绑定DIV标签)（二） </title>
<script language="javascript" type="text/javascript">
/*
鼠标拖动层(可任意绑定DIV标签)（二）
作者:Anlige
联系方式:1034555083/[email protected]调用方法:Endrag.bind('MoveDiv').bind('Div1').offSet({x:0,y:0});
参数说明:bind的参数为Div标签的ID属性或者Div对象本身；offSet的参数为偏移量，默认(不调用本方法)x,y偏移都为0
说明:通过多次调用bind方法绑定多个对象的拖动
*/
Endrag={
x0:0,y0:0,x1:0,y1:0,moveable:false,index:100,NS:(navigator.appName=='Netscape'),offSets:{x:0,y:0},
//开始拖动;
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;
}
},
//拖动;
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";
}
},
//停止拖动;
stopDrag:function (e){
if(Endrag.moveable) {
if(!Endrag.NS){this.releaseCapture();}
Endrag.moveable = false;
}
},
//获得焦点;
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">
拖动层
</div>
调用方法<br />
Endrag.bind('MoveDiv').bind('Div1').offSet({x:0,y:0});<br />
可以绑定任意多个Div标签;<br />offSet设置偏移，默认x偏移和y偏移都为0,供调整使用<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">
拖动层
</div> </div>
</body>
</html>