<!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> [清除记录] [添加记录] 关闭编辑锁定缩小 </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]