<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#box{width:400px;height:400px;border:1px solid #ccc;position:relative;margin:300px auto;}
#cont{width:60px;height:60px;background:pink;position:absolute;}
</style>
</head>
<body>
<div id="box">
<div id="cont"></div>
</div>
</body>
<script type="text/javascript">
var Box=document.getElementById('box');
var Cont=document.getElementById('cont');
Cont.οnmοusedοwn=function(e){
e=e||event;
var _offsetX=e.clientX-Cont.offsetLeft,
_offsetY=e.clientY-Cont.offsetTop,
_winWidth=document.documentElement.clientWidth||document.body.clientWidth,
_winHeight=document.documentElement.clientHeight||document.body.clientHeight;
document.οnmοusemοve=function(e){
e=e||event;
var _left=e.clientX-_offsetX,
_top=e.clientY-_offsetY;
if(_left<0)
_left=0;
else if(_left>Box.offsetWidth-Cont.offsetWidth)
_left=Box.offsetWidth-Cont.offsetWidth;
if(_top<0)
_top=0;
else if(_top>Box.offsetHeight-Cont.offsetHeight)
_top=Box.offsetHeight-Cont.offsetHeight
Cont.style.left= _left+'px';
Cont.style.top=_top+'px';
}
document.οnmοuseup=function(e){
e=e||event;
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#box{width:400px;height:400px;border:1px solid #ccc;position:relative;margin:300px auto;}
#cont{width:60px;height:60px;background:pink;position:absolute;}
</style>
</head>
<body>
<div id="box">
<div id="cont"></div>
</div>
</body>
<script type="text/javascript">
var Box=document.getElementById('box');
var Cont=document.getElementById('cont');
Cont.οnmοusedοwn=function(e){
e=e||event;
var _offsetX=e.clientX-Cont.offsetLeft,
_offsetY=e.clientY-Cont.offsetTop,
_winWidth=document.documentElement.clientWidth||document.body.clientWidth,
_winHeight=document.documentElement.clientHeight||document.body.clientHeight;
document.οnmοusemοve=function(e){
e=e||event;
var _left=e.clientX-_offsetX,
_top=e.clientY-_offsetY;
if(_left<0)
_left=0;
else if(_left>Box.offsetWidth-Cont.offsetWidth)
_left=Box.offsetWidth-Cont.offsetWidth;
if(_top<0)
_top=0;
else if(_top>Box.offsetHeight-Cont.offsetHeight)
_top=Box.offsetHeight-Cont.offsetHeight
Cont.style.left= _left+'px';
Cont.style.top=_top+'px';
}
document.οnmοuseup=function(e){
e=e||event;
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
</script>
</html>
2540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
