<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>darg</title>
<style type="text/css">
.login_title { cursor: move; position: absolute; top: 300px; left: 200px; background: #259; height: 60px; width: 500px; }
</style>
</head>
<body>
<div class="login_title" id="box"></div>
<script type="text/javascript">
function getByClass (clsName, parent) { var oParent=parent?document.getElementById(parent):document, eles=[], elements=oParent.getElementsByTagName('*'); for (var i = 0, l=elements.length; i<l;
i++) { if (elements[i].className==clsName) { eles.push(elements[i]) }
}
return eles; }
window.onload=drag;
function drag() { var oTitle=getByClass('login_title')[0]; oTitle.onmousedown=fnDown; }
function fnDown(event) { event = event || window.event; var oDrag=document.getElementById('box'), disX=event.clientX-oDrag.offsetLeft, disY=event.clientY-oDrag.offsetTop;
document.onmousemove=function(event) { event = event || window.event; fnMove(event, disX, disY); }
document.onmouseup=function() { document.onmousemove=null; document.onmouseup=null; }
}
function fnMove(e, posx, posy) { var oDrag=document.getElementById('box'), l=e.clientX-posx, t=e.clientY-posy, winW=document.documentElement.clientWidth || document.body.clientWidth, winH=document.documentElement.clientHeight || document.body.clientHeight, maxW=winW-oDrag.offsetWidth-10, maxH=winH-oDrag.offsetHeight;
if(l<0) { l=0; }
else if(l>maxW) { l=maxW; }
if(t<0) { t=10; }
else if(t>maxH) { t=maxH; }
oDrag.style.left=l+'px'; oDrag.style.top =t+'px'; }
</script>
</body>
</html>知识点：
- 用class获取元素封装;
- 学习mouseover事件;
- 常见拖拽bug造成原因,鼠标当前位置-元素距离浏览器的位置；
- 超过容器大小判断；