javascript

位置:IT落伍者 >> javascript >> 浏览文章

js 实现鼠标移动div


发布日期:2022年03月25日
 
js 实现鼠标移动div

js


var posX;
var posY;
fdiv = documentgetElementById("divBody");
documentgetElementById("divHead")onmousedown=function(e)
{
if(!e) e = windowevent; //IE
posX = eclientX parseInt(fdivstyleleft);
posY = eclientY parseInt(fdivstyletop);
documentonmousemove = mousemove;
}

documentonmouseup = function()
{
documentonmousemove = null;
}


function mousemove(ev)
{
if(ev==null) ev = windowevent;//IE
fdivstyleleft = (evclientX posX) + "px";
fdivstyletop = (evclientY posY) + "px";
}
html


<div class="divBody" id="divBody" style="left: px; top: px;"> <!这里要加style="left: px; top: px;" 否则有问题>
<div class="divHead" id="divHead" style="cursor: move;">
</div>
<div class="content">
</div>
<div class="tail">
</div>
</div>

css:

divBody{
//margintop:px;
border: solid #CCC px;
width:px;
height:px;
position:relative;
zindex:;
marginleft:auto;
marginright:auto;
}
divHead{
width:px;
height:px;
backgroundcolor:#CCC;
}
content
{
width:px;
height:px;
}
tail{
background:#CCC;
height:px;
width:px;
display:tablecell;
verticalalign:middle;
}

上一篇:javascript解决innerText浏览器兼容问题

下一篇:cookie.js 加载顺序问题怎么才有效