复制代码 代码如下:
<HTML>
<HEAD>
<TITLE>JS+CSS制作的DIV层最小化和随意拖拽排序功能</TITLE>
<style type="text/css">
body
{
margin:10px;
}
#dragHelper
{
position:absolute;/*重要*/
border:2px dashed #000000;
background-color:#FFFFFF;
filter: alpha(opacity=30);
}
.normal
{
position:absolute;/*重要*/
width:300px;
#height:10px;
border:1px solid #666666;
background-color:#FFFFFF;
}
.over
{
position:absolute;/*重要*/
width:300px;
#height:10px;
border:1px solid #666666;
background-color:#f3f3f3;
filter: alpha(opacity=50);
}
.dragArea {
CURSOR: move;
}
</style>
</HEAD>
<BODY oncontextmenu="window.event.returnValue=false">
<div id="dragHelper"></div>
<div overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>百度</td><td dragArea="yes">点此拖动</td><td><a href="#">-</a> x</td></tr>
<tr><td colspan="3">地址:http://www.baidu.com</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>新浪</td><td dragArea="yes">........</td><td><a href="#">-</a> x</td></tr>
<tr><td colspan="3">地址:http://www.sina.com.cn</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>网页特效</td><td dragArea="yes">........</td><td><a href="#">-</a> x</td></tr>
<tr><td colspan="3">地址：http://www.CsrCode.cn</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>七彩影视</td><td dragArea="yes">........</td><td><a href="#">-</a> x</td></tr>
<tr><td colspan="3">地址：http://www.33567.cn</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<>
</SCRIPT>
</HTML>