js+html+css实现鼠标移动div实例

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

　　}

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

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

　　}