<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动框练习</title> <style type = "text/css"> #big{width: 300px;height: 200px;position: absolute;top: 200px;left: 300px;background: #ccc;} h1{width: 200px;height: 50px;line-height: 50px;text-align: center;background: orange;margin: 0 auto; cursor: move;} </style> </head> <body> <div id="big"> <h1 class="titl"></h1> </div> <script type="text/javascript"> //通过父元素获取到指定想要获取的元素。 function getClass(clsName,parent){ var oParent = parent?document.getElementById(parent):document; var oH1 = oParent.getElementsByClassName(clsName)[0]; return oH1; } window.onload = drag; //给h1添加按住的事件。 function drag(){ var h1Node = getClass("titl","big"); h1Node.onmousedown = fnDown; } //通过函数来获取指针的位置。 function fnDown(event) { event = event || window.event; var oDiv = document.getElementById("big"), //光标按下时光标和面板之间的距离。 disX = event.clientX-oDiv.offsetLeft; disY = event.clientY-oDiv.offsetTop; document.onmousemove = function(event) { event = event || window.event; fnMove(event,disX,disY); } document.onmouseup = function(){ document.onmousemove = null; } } function fnMove(e,posX,posY) { var oDiv = document.getElementById("big"), l = e.clientX-posX, t = e.clientY-posY, winW = document.documentElement.clientWidth || document.body.clientWidth, winH = document.documentElement.clientHeight || document.body.clientHeight, maxW = winW-oDiv.offsetWidth, maxH = winH-oDiv.offsetHeight; if (l<0) { l=10; } else if(l>maxW){ l=maxW; } if (t<0) { t=10; } else if(t>maxH){ t=maxH; } oDiv.style.left = l+"px"; oDiv.style.top = t+"px"; } </script> </body> </html>