郑州网站建设业务咨询热线：
0371-65349913 / 15333818157
0371-65349913 / 15333818157
本网页展示了一种兼容多种浏览器的DIV可拖动层的制作技巧，在网站建设中的经常要使用DIV+CSS技术，而制作出实用的DIV层则是很多网站建设人员的梦想。在使用DIV制作div层时，如果这个层能够被鼠标随意拖动到想防止的地方，则能给网站增光添彩，让网站看上去更加符合用户体验，更具有个性。下面，郑州网站建设公司的小编整理了如何制作兼容多种浏览器的DIV可拖动层的技巧，网页运行如下图所示：
下面整理了这个可拖动层制作的实例代码，已在多个浏览器上测试通过，可供建站用户和网站建设人员参考：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>兼容多种浏览器的DIV可拖动层的制作技巧</title>
</head>
<body>
<div id="divbox" style="position: absolute; width: 400px; height: 200px; background-color: #DDDDDD; top: 150px; left: 200px; z-index: 101; border: solid 1px blue;">
<div id="divtitle" style="background-color: #BBBBBB; cursor: move; height: 20px; color: #0000CC; font-size: 12px; padding-top: 5px; padding-left: 10px; border-bottom: solid 1px blue;">这里是层标题，本例展示一个可以用鼠标拖动的div层</div>
<span style="display:block; margin-top:50px;">这是层内的内容：本例子为郑州网站建设公司-郑州凯讯公司展示的一个可拖动层的实例，可供参考。</span>
</div>
<script type="text/javascript">
var posX;
var posY;
fdiv = document.getElementById("divbox");
document.getElementById("divtitle").onmousedown=function(e)
{
if(!e) e = window.event;
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;
fdiv.style.left = (ev.clientX - posX) + "px";
fdiv.style.top = ev.clientY - posY + "px";
}
</script>
</body>
</html>