網頁中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()" >
                                        
< 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 >

 

這樣,拖動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就在層的下面了

 

 

你可能感兴趣的:(div)