<HTML> <head> <style type="text/css"> .divBody{ //margin-top:20px; border: solid #CCC 1px; width:500px; height:400px; position:relative; z-index:0; margin-left:auto; margin-right:auto; } .divHead{ width:500px; height:50px; background-color:#CCC; } .content { width:500px; height:300px; } .tail{ background:#CCC; height:50px; width:500px; display:table-cell; vertical-align:middle; } </style> </head> <BODY> <div class="divBody" id="divBody" style="left: 29px; top: 14px;"> <!--这里要加style="left: 29px; top: 14px;" 否则有问题--> <div class="divHead" id="divHead" style="cursor: move;"> </div> <div class="content"> </div> <div class="tail"> </div> </div> <SCRIPT> var posX; var posY; fdiv = document.getElementById("divBody"); document.getElementById("divHead").onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - parseInt(fdiv.style.top); document.onmousemove = mousemove; } document.onmouseup = function() { document.onmousemove = null; } function mousemove(ev) { if(ev==null) ev = window.event;//IE fdiv.style.left = (ev.clientX - posX) + "px"; fdiv.style.top = (ev.clientY - posY) + "px"; } </SCRIPT> </BODY> </HTML>