DIV层拖动的JavaScript

最新推荐文章于 2024-05-13 17:05:54 发布

jadeflute

最新推荐文章于 2024-05-13 17:05:54 发布

阅读量662

点赞数

分类专栏： JavaScript 文章标签： div javascript function class float border

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

无刷新添加一个新的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层" οnclick="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>

jadeflute

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV层拖动的JavaScript

无刷新添加一个新的DIV层，并可实现的该层的拖动，鼠标拖动层可移动位置，将JS部分另存为一个新文件，用到的时候从外部引入，这个拖动层代码很流行，Google和YAHOO等大网站经常可以看到这种效果。 <!--body {margin:0px;padding:0px;font-size:12px;text-align:center;}body > div {te
复制链接

扫一扫