DIV层拖动的JavaScript

最新推荐文章于 2026-06-25 10:26:00 发布

转载最新推荐文章于 2026-06-25 10:26:00 发布 · 723 阅读

标签

#div #javascript #function #class #float

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在网页中无刷新添加并拖动DIV层的方法，通过JavaScript实现层的动态添加与鼠标拖动时的位置更新。此外，还实现了层的半透明效果、虚线框显示及层的折叠和关闭功能。

无刷新添加一个新的DIV层，并可实现的该层的拖动，鼠标拖动层可移动位置，将JS部分另存为一个新文件，用到的时候从外部引入，这个拖动层代码很流行，Google和YAHOO等大网站经常可以看到这种效果。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <mce:style></mce:style><style mce_bogus="1">body {margin:0px;padding:0px;font-size:12px;text-align:center;} body > div {text-align:center; margin-right:auto; margin-left:auto;} .content{width:900px;} .content .left{ float:left; width:20%; border:1px solid #0066CC; margin:3px; } .content .center{float:left;border:1px solid #FF0000;margin:3px;width:57%} .content .right{float:right;width:20%;border:1px solid #FF0000;margin:3px} .mo{height:auto;border:1px solid #CCC;margin:3px;background:#FFF} .mo h1{background:#ECF9FF;height:18px;padding:3px;cursor:move} .closediv{cursor:default;} .minusspan{cursor:default;} .mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px} h1{margin:0px;padding:0px;text-align:left;font-size:12px} .dragging { FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=60); opacity: 0.6; moz-opacity: 0.6 }</style> <mce:script language="javascript"></mce:script> </head> <body> <INPUT TYPE="button" value="添加一个新的DIV层" onclick="add_div();"> <div class=content> <div class=left id=dom0> <div class=mo id=m0> <h1>dom0</h1> <div class="nr"></div> </div> <div class=mo id=m1> <h1>dom1</h1><div class="nr"></div> </div> <div class=mo id=m2><h1>dom2</h1><div class="nr"></div></div> <div class=mo id=m3><h1>dom3</h1><div class="nr"></div></div> </div> <div class=center id=dom1> <div class=mo id=m4><h1>dom4</h1><div class="nr"></div></div> <div class=mo id=m5><h1>dom5</h1><div class="nr"></div></div> </div> <div class=right id=dom2> <div class=mo id=m8><h1>dom8</h1><div class="nr"></div></div> <div class=mo id=m9><h1>dom9</h1><div class="nr"></div></div> </div> </div> </body> </html>