Js+html+css implement Mouse Mobile div instance _javascript skills

Js:

Copy Code code as follows:

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

Html:

Copy Code code as follows:

<div class= "Divbody" id= "Divbody" style= "left:29px"; top:14px; " > <!--here to add style= "LEFT:29PX; top:14px; "Otherwise there is a problem-->
<div class= "Divhead" id= "Divhead" style= "Cursor:move"; >
</div>
<div class= "Content" >
</div>
<div class= "Tail" >
</div>
</div>

Css:

Copy Code code as follows:

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