網頁中DIV的兩個用法
1.使Div能夠拖動
html代碼如下:
<div onselectstart="return(false);" id="layerCondition" style="Z-INDEX: 101; LEFT: 0px; VISIBILITY: hidden; WIDTH: 200px; POSITION: absolute; TOP: 30px; HEIGHT: 160px"
align="left">
<table style="BORDER-RIGHT: rgb(104,160,196) 1px solid; BORDER-TOP: rgb(104,160,196) 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: rgb(104,160,196) 1px solid; BORDER-BOTTOM: rgb(104,160,196) 1px solid; FONT-FAMILY: Verdana"
cellSpacing="0" cellPadding="1" width="100%" align="left" bgColor="#68a0c4" border="1">
<!--------------條件選擇層 標題區 START ----------------->
<tr>
<td id="bg" noWrap width="100%" colSpan="4">
<table style="FONT-SIZE: 9pt; FONT-FAMILY: verdana" cellSpacing="0" cellPadding="0" width="100%"
border="0">
<tr>
<td width="341" height="15" id="FLYDIV" onMouseDown="catchFlyBar()" onMouseUp="releaseFlyBar()">
<p style="FONT-SIZE: 9pt; COLOR: #ffffff; FONT-FAMILY: Verdana">查詢條件選擇</p>
</td>
</tr>
</table>
</td>
</tr>
<!--------------條件選擇層 標題區 END ----------------->
<!--------------條件選擇層 內容區 START ----------------->
<tr bgColor="#e0effa" width="100%">
<td >
</td>
</tr>
</table>
</div>
align="left">
<table style="BORDER-RIGHT: rgb(104,160,196) 1px solid; BORDER-TOP: rgb(104,160,196) 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: rgb(104,160,196) 1px solid; BORDER-BOTTOM: rgb(104,160,196) 1px solid; FONT-FAMILY: Verdana"
cellSpacing="0" cellPadding="1" width="100%" align="left" bgColor="#68a0c4" border="1">
<!--------------條件選擇層 標題區 START ----------------->
<tr>
<td id="bg" noWrap width="100%" colSpan="4">
<table style="FONT-SIZE: 9pt; FONT-FAMILY: verdana" cellSpacing="0" cellPadding="0" width="100%"
border="0">
<tr>
<td width="341" height="15" id="FLYDIV" onMouseDown="catchFlyBar()" onMouseUp="releaseFlyBar()">
<p style="FONT-SIZE: 9pt; COLOR: #ffffff; FONT-FAMILY: Verdana">查詢條件選擇</p>
</td>
</tr>
</table>
</td>
</tr>
<!--------------條件選擇層 標題區 END ----------------->
<!--------------條件選擇層 內容區 START ----------------->
<tr bgColor="#e0effa" width="100%">
<td >
</td>
</tr>
</table>
</div>
注意Div的id為layerCondition,而我們要拖動的是層中的一個td,id為FLYDIV
下面是javascript代碼,請放在<head>標簽中
<script type="text/javascript">
//Drag & Move
var bIsCatchFlyBar = false;
var dragClickX = 0;
var dragClickY = 0;
function catchFlyBar(e)
{
bIsCatchFlyBar = true;
var x=event.x+document.body.scrollLeft;
var y=event.y+document.body.scrollTop;
dragClickX=x-document.getElementById("layerCondition").style.pixelLeft;
dragClickY=y-document.getElementById("layerCondition").style.pixelTop;
document.getElementById("FLYDIV").setCapture();
document.onmousemove = moveFlyBar;
}
function releaseFlyBar(e)
{
bIsCatchFlyBar = false;
document.getElementById("layerCondition").style.left = event.x+document.body.scrollLeft-dragClickX;
document.getElementById("layerCondition").style.top = event.y+document.body.scrollTop-dragClickY;
document.getElementById("FLYDIV").releaseCapture();
document.onmousemove = null;
}
function moveFlyBar(e)
{
if(bIsCatchFlyBar)
{
document.getElementById("layerCondition").style.left = event.x+document.body.scrollLeft-dragClickX;
document.getElementById("layerCondition").style.top = event.y+document.body.scrollTop-dragClickY;
}
}
</script>
//Drag & Move
var bIsCatchFlyBar = false;
var dragClickX = 0;
var dragClickY = 0;
function catchFlyBar(e)
{
bIsCatchFlyBar = true;
var x=event.x+document.body.scrollLeft;
var y=event.y+document.body.scrollTop;
dragClickX=x-document.getElementById("layerCondition").style.pixelLeft;
dragClickY=y-document.getElementById("layerCondition").style.pixelTop;
document.getElementById("FLYDIV").setCapture();
document.onmousemove = moveFlyBar;
}
function releaseFlyBar(e)
{
bIsCatchFlyBar = false;
document.getElementById("layerCondition").style.left = event.x+document.body.scrollLeft-dragClickX;
document.getElementById("layerCondition").style.top = event.y+document.body.scrollTop-dragClickY;
document.getElementById("FLYDIV").releaseCapture();
document.onmousemove = null;
}
function moveFlyBar(e)
{
if(bIsCatchFlyBar)
{
document.getElementById("layerCondition").style.left = event.x+document.body.scrollLeft-dragClickX;
document.getElementById("layerCondition").style.top = event.y+document.body.scrollTop-dragClickY;
}
}
</script>
這樣,拖動div的標題就能拖動整個div了
2.DIV與下拉列表框的問題
當div的下面有dropdownlist的時候,你會發現這個dropdownlist一直在div的上面,設置div的index大於頁面的也不行
其實只需要在div中添加如下代碼就可以完美解決這個問題
<iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:142px; height:166px; z-index:-1;"></iframe>
意即在div中添加一個框架頁面,這樣dropdownlist就在層的下面了
