仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]

仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>仿3721首页模块拖曳移动效果[拖曳层移动层]呵，做了一些细致的处理</title> <style type="text/css"> html, body {     width:100%;     height:100%;     padding:0px;     margin:0px; } body {     text-align:center;     font-size:14px; } .cell_left, .cell_right {     width:202px; } .cell_center {     width:404px; } .left {     float:left; } .row {     clear:both; } .r_nbsp {     width:20px; } .root {     width:876px;     height:auto;     margin:auto; } .root * { /*此属性FF的说*/     -moz-user-select:none; } .line {     width:100%px;     height:0px;     overflow:hidden; } .move {     border:#CCCCCC 1px solid;     width:100%;     height:aotu;     margin-top:5px;     margin-bottom:5px;     display:none; } .title {     height:24px;     line-height:24px;     background:#0080C0; } .title_a {     width:auto;     margin-right:80px;     cursor:move;     font-size:12px;     font-weight:bold;     color:#FFFFFF;     text-align:left;     padding-left:10px; } .title_reduce, .title_lock, .title_edit, .title_close {     float:right;     width:20px;     font-size:9px;     color:#CCCCCC; } .title_reduce, .title_lock, .title_edit {     cursor:pointer; } .title_close {     cursor:default; } .content {     height:100px;     border-top:#CCCCCC 1px solid;     background-color:#F7F7F7;     font-size:12px;     line-height:130%; } .CDrag_temp_div {     border:#CCCCCC 1px dashed;     margin-top:5px;     margin-bottom:5px; } a#DEL_CDrag, a#ADD_CDrag {     color:#6699CC;     text-decoration:none; } a#DEL_CDrag:hover, a#ADD_CDrag:hover {     color:#FF0000; } .Dall_screen, .Iall_screen {     position:absolute;     left:0px;     top:0px; } .Dall_screen {     z-index:99;     background-color:#000000;     filter:alpha(opacity=30);     opacity:0.3; } .Iall_screen {     z-index:98;     filter:alpha(opacity=0);     opacity:0; } .Nall_screen {     position:absolute;     z-index:100;     left:300px;     top:100px;     width:300px;     height:auto;     border:#6699CC 1px solid;     background-color:#F0FAFF;     padding:10px 0 10px 0; } .Call_screen {     width:100%;     height:auto;     line-height:30px;     font-size:12px;     padding-bottom:10px; } </style>  </head> <body>  <div>     [清除记录]     &nbsp;&nbsp;     [添加记录] </div> <div class="move" id="root_row"><div class="title"><div class="title_close">关闭</div><div class="title_edit">编辑</div><div class="title_lock">锁定</div><div class="title_reduce">缩小</div><div class="title_a">　</div></div><div class="content"></div></div> <div class="root">     <div class="cell_left left" id="m_1">         <div class="line">　</div>     </div>          <div class="left r_nbsp">　</div>          <div class="cell_center left" id="m_2">         <div class="line">　</div>     </div>          <div class="left r_nbsp">　</div>          <div class="cell_right left" id="m_3">         <div class="line">　</div>     </div> </div> </body> </html>

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]