拖动层的javasvript代码
<html>
<body>
<div id="div1" style="POSITION: absolute; LEFT: 0px; TOP: 0px; WIDTH: 356px;HEIGHT: 284px; BACKGROUND-COLOR: silver;"
onmousedown="down()" onmousemove="move()" onmouseup="up()"></div>
<script>
var isdown = false
var beginx,beginy
function down() {
isdown = true;
}
function move() {
if (isdown){
var endx = event.clientX;
var endy = event.clientY;
div1.style.left = parseInt( div1.style.left ) + endx-beginx;
div1.style.top = parseInt( div1.style.top ) + endy-beginy;
}
beginx = event.clientX;
beginy = event.clientY;
}
function up() {
isdown = false;
}
document.body.onmousemove = move
document.body.onmouseup = up
</script>
</body>
</html>
<body>
<div id="div1" style="POSITION: absolute; LEFT: 0px; TOP: 0px; WIDTH: 356px;HEIGHT: 284px; BACKGROUND-COLOR: silver;"
onmousedown="down()" onmousemove="move()" onmouseup="up()"></div>
<script>
var isdown = false
var beginx,beginy
function down() {
isdown = true;
}
function move() {
if (isdown){
var endx = event.clientX;
var endy = event.clientY;
div1.style.left = parseInt( div1.style.left ) + endx-beginx;
div1.style.top = parseInt( div1.style.top ) + endy-beginy;
}
beginx = event.clientX;
beginy = event.clientY;
}
function up() {
isdown = false;
}
document.body.onmousemove = move
document.body.onmouseup = up
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>显示拖动层例子</title>
</head>
<body>
<input type=button value="显示层" style="position:absolute; left:15; top:18" onclick="window.div1.style.display=''">
<div id = div1 style="position:absolute;z-index:1;display:none;width:148px;height=129px;background-color:#EEEEEE;border:1px solid black; left:90px; top:41px">
<table border="1" width="100%" id="table1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolorlight="#808080" bordercolordark="#808080" height="100%">
<tr>
<td style="font-size:9pt;" bgcolor="#C0C0C0" height="19" id =divTitle style="cursor:default;" width="94%">拖动我看看</td>
<td onclick="div1.style.display='none'" style="cursor:default" bgcolor="#808080" height="19" style="cursor:default;" width="5%" bordercolor="#000000">
<font color="#FFFFFF">×</font></td>
</tr>
<tr>
<td align=center colspan="2">哈哈，可以拖动！
</td>
</tr>
</table>
</div>
<script language="javascript">
<!--
var mX,mY,oX,oY;
window.divTitle.onmousedown=function(){
mX = parseInt(event.x,10);
mY = parseInt(event.y,10);
oX = parseInt(div1.style.left,10);
oY = parseInt(div1.style.top,10);
window.divTitle.setCapture();
window.divTitle.onmousemove=function(){
div1.style.left=oX + (parseInt(event.x,10) -mX);
div1.style.top=oY + (parseInt(event.y,10)-mY);
};
};
window.divTitle.onmouseup = function(){
divTitle.releaseCapture();
window.divTitle.onmousemove=null;
}
//-->
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>显示拖动层例子</title>
</head>
<body>
<input type=button value="显示层" style="position:absolute; left:15; top:18" onclick="window.div1.style.display=''">
<div id = div1 style="position:absolute;z-index:1;display:none;width:148px;height=129px;background-color:#EEEEEE;border:1px solid black; left:90px; top:41px">
<table border="1" width="100%" id="table1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolorlight="#808080" bordercolordark="#808080" height="100%">
<tr>
<td style="font-size:9pt;" bgcolor="#C0C0C0" height="19" id =divTitle style="cursor:default;" width="94%">拖动我看看</td>
<td onclick="div1.style.display='none'" style="cursor:default" bgcolor="#808080" height="19" style="cursor:default;" width="5%" bordercolor="#000000">
<font color="#FFFFFF">×</font></td>
</tr>
<tr>
<td align=center colspan="2">哈哈，可以拖动！
</td>
</tr>
</table>
</div>
<script language="javascript">
<!--
var mX,mY,oX,oY;
window.divTitle.onmousedown=function(){
mX = parseInt(event.x,10);
mY = parseInt(event.y,10);
oX = parseInt(div1.style.left,10);
oY = parseInt(div1.style.top,10);
window.divTitle.setCapture();
window.divTitle.onmousemove=function(){
div1.style.left=oX + (parseInt(event.x,10) -mX);
div1.style.top=oY + (parseInt(event.y,10)-mY);
};
};
window.divTitle.onmouseup = function(){
divTitle.releaseCapture();
window.divTitle.onmousemove=null;
}
//-->
</script>
</body>
</html>
