JS+CSS制作DIV層可(最小化/拖拽/排序)功能實(shí)現(xiàn)代碼
2024-05-06 14:19:31
供稿：網(wǎng)友
代碼如下:
<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" style="display:none"></div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>百度</td><td dragArea="yes" class="dragArea">點(diǎn)此拖動(dòng)</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:http://www.baidu.com</td></tr>
<tr><td colspan="3">關(guān)鍵字:</td></tr>
<tr><td colspan="3">說明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>新浪</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:http://www.sina.com.cn</td></tr>
<tr><td colspan="3">關(guān)鍵字:</td></tr>
<tr><td colspan="3">說明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>網(wǎng)頁特效</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址：http://www.CsrCode.cn</td></tr>
<tr><td colspan="3">關(guān)鍵字:</td></tr>
<tr><td colspan="3">說明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>七彩影視</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
