鼠标拖曳
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>New Document</title>
</head>
<body><div style="width:500px; height:500px; border:1px solid blue; overflow: hidden">
<div id="div" style="width:200px; height:200px; border:1px solid red">好好学习</div></div>
</body>
<script type="text/javascript">
<!--
document.getElementById("div").onmousedown = function(e){
var evn = e || window.event;
var offsetPos = {x: (mousePos(evn).x - getPosition(this).x), y: (mousePos(evn).y - getPosition(this).y)};
var object = this;
document.onmousemove = function(ee){
var ee = ee || window.event;
var movemousePos = mousePos(ee);
object.style.position = "absolute";
object.style.left = parseInt(movemousePos.x - offsetPos.x) + "px";
object.style.top = parseInt(movemousePos.y - offsetPos.y) + "px";
}
document.onmouseup = function(){
this.onmousemove = null;
this.onmouseup = null;
}
return false;
}
function mousePos(evn){
if(evn.pageX || evn.pageY)
return {x: evn.pageX, y: evn.pageY};
else
return{
x: evn.clientX + document.body.scrollLeft - document.body.clientLeft,
y: evn.clientY + document.body.scrollTop - document.body.clientTop
}
}
function getPosition(e){
var left = 0;
var top = 0;
while(e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x: left, y: top};
}
//-->
</script>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>New Document</title>
</head>
<body><div style="width:500px; height:500px; border:1px solid blue; overflow: hidden">
<div id="div" style="width:200px; height:200px; border:1px solid red">好好学习</div></div>
</body>
<script type="text/javascript">
<!--
document.getElementById("div").onmousedown = function(e){
var evn = e || window.event;
var offsetPos = {x: (mousePos(evn).x - getPosition(this).x), y: (mousePos(evn).y - getPosition(this).y)};
var object = this;
document.onmousemove = function(ee){
var ee = ee || window.event;
var movemousePos = mousePos(ee);
object.style.position = "absolute";
object.style.left = parseInt(movemousePos.x - offsetPos.x) + "px";
object.style.top = parseInt(movemousePos.y - offsetPos.y) + "px";
}
document.onmouseup = function(){
this.onmousemove = null;
this.onmouseup = null;
}
return false;
}
function mousePos(evn){
if(evn.pageX || evn.pageY)
return {x: evn.pageX, y: evn.pageY};
else
return{
x: evn.clientX + document.body.scrollLeft - document.body.clientLeft,
y: evn.clientY + document.body.scrollTop - document.body.clientTop
}
}
function getPosition(e){
var left = 0;
var top = 0;
while(e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x: left, y: top};
}
//-->
</script>
</html>