Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>拖动层</title> <style type="text/css"> .main { position: absolute; background-color: #fff; top: 100px; left: 100px; z-index: 101; border: solid 1px #ccc; } .titlebar { background-color: #ccc; cursor: move; height: 20px; color: #fff; font-size: 13px; padding-top: 5px; padding-left: 10px; } </style></head><body> <div id="main" class="main" style="width: 500px; height: 350px;"> <div id="titlebar" class="titlebar"> 拖动层 </div> <div id="Div1" class="main" style="width: 200px; height: 50px;"> <div id="Div2" class="titlebar"> 拖动层2 </div> </div> </div> <script type="text/javascript"> new drag("main", "titlebar"); new drag("Div1", "Div2"); function drag(main, titlebar) { var obj = document.getElementById(main); var title = document.getElementById(titlebar); if(obj && title) { var posX; var posY; var offset = 10; var mousemove = function(evt) { if (evt == null) evt = window.event; var left = evt.clientX - posX; var top = evt.clientY - posY; var limitLeft = 0; var limitTop = 0; if(obj.parentNode.nodeName != "BODY") { limitLeft = obj.parentNode.clientWidth - obj.clientWidth - offset; if(limitLeft < left) { left = limitLeft; } limitTop = obj.parentNode.clientHeight - obj.clientHeight - offset; if(limitTop < top) { top = limitTop; } } else { limitLeft = window.screen.availWidth - obj.clientWidth - offset; if(limitLeft < left) { left = limitLeft; } limitTop = window.screen.availHeight - obj.clientHeight - offset; if(limitTop < top) { top = limitTop; } } if(left < offset) { left = offset; } if(top < offset) { top = offset; } obj.style.left = left + "px"; obj.style.top = top + "px"; } title.onmousedown = function(evt) { if (!evt) evt = window.event; posX = evt.clientX - obj.offsetLeft; posY = evt.clientY - obj.offsetTop; document.onmousemove = mousemove; } document.onmouseup = function() { document.onmousemove = null; } } else { alert("参数错误!"); } } </script></body></html>
转载于:https://www.cnblogs.com/KenBlove/archive/2009/06/05/1497078.html
相关资源：拖动层效果，兼容IE和FF!第1/2页
