dragdropstyle.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%;
	height:0px;
	overflow:hidden;
}

.move {
	border:#CCCCCC 1px solid;
	width:100%;
	height:auto;
	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;
}