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

306 阅读 0 评论 202 点赞

我是靠谱客的博主单薄野狼，这篇文章主要介绍仿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>

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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]