js实现鼠标拖动div

在做项目的时候会有一个弹出窗填写一些资料，在我们想修改这些列表中的内容的时候就会点击弹出框来修改内容，有时候我们一打开就有可能忘记我们要修改那个内容了，这时候就会想看看之前的内容的时候，又要关掉弹出框，这样会有点麻烦，这个时候我们可以给弹出框的div做一个鼠标拖动的效果，废话太多了，看下面的吧：）

html：

<div class="divBody" id="divBody" style="left: 29px; top: 14px;">

         <div class="divHead" id="divHead" style="cursor: move;"></div>

         <div class="content"></div>

         <div class="tail"></div>

</div>

js:

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";

}

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;

}