- #div1{width:500px; height: 300px; background-color: #ccc; position: relative;margin: 30px auto;}
- #div2{ width: 100px; height: 100px; background-color: red; position: absolute; left: 0; top: 0;}
html 如下
- <div id="div1">
- <div id="div2"></div>
- </div>
javascript 如下
- var div1=document.getElementById("div1");
- var div2=document.getElementById("div2");
- div2.onmousedown=function(ev){
- var e=ev || event;
- var disX=e.clientX-div2.offsetLeft;
- var disY=e.clientY-div2.offsetTop;
- document.onmousemove=function(ev){
- var e=ev || event;
- var l=e.clientX-disX;
- var t=e.clientY-disY;
- if(l<=0) l=0;
- if(t<=0) t=0;
- if(l>=div1.offsetWidth-div2.offsetWidth) l=div1.offsetWidth-div2.offsetWidth;
- if(t>=div1.offsetHeight-div2.offsetHeight) t=div1.offsetHeight-div2.offsetHeight;
- div2.style.left=l+"px";
- div2.style.top=t+"px";
- }
- document.onmouseup=function(){
- document.onmousemove=null;
- document.onmouseup=null;
- }
- return false;
- }
来源: http://www.bubuko.com/infodetail-2650103.html