隨筆 - 154 
文章 - 60 
trackbacks - 0


           
	

          

          
	
		
          
			
          
	
          
		
          <2007年12月>
          
	
          日一二三四五六
          2526272829301
          2345678
          9101112131415
          16171819202122
          23242526272829
          303112345
          

          

          
			


          
	
          聲明：
          

          
          該blog是為了收集資料，認識朋友，學習、提高技術，所以本blog的內容除非聲明，否則一律為轉載！！
          

          
感謝那些公開自己技術成果的高人們！！！
          
支持開源，尊重他人的勞動！！ 
      

          

			

          常用鏈接
          


          留言簿(3)
          




		
          隨筆分類(148)
          
		
				
			
	
		
          隨筆檔案(143)
          
		
				
			
	
		
          收藏夾(2)
          
		
				
			
	
		
          其他
          
		
				
            
			
				
          
			
	
		
          學習（技術）
          
		
				
			
	
		
          觀察思考（非技術）
          
		
				
			
	




          搜索
          

            
	
          • 
		
          •  
	
            • 

          


          最新評論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評論排行榜
          


          		
	

          

          
	
					


          
	
	代碼：
          

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          
"http://www.w3.org/TR/html4/loose.dtd"          >
          
          <html>
          
          <head>
          
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
          
          <title>drag layer</title>
          
          <style>
          
body,table          {color:#000000;
          
    font-size          :12px;
          
          }
          
div.div_one          {}
          
.dragBar          {color:#FFFFFF;
          
    font-weight          :bold}
          
          </style>
          
          <script language="javascript" defer>
          
          /*written by joelee@51js
          
          */
          
              var tmpElement=null;
          
              var dragElement=null;
          
              var downX,downY,tmp_o_x,tmp_o_y;
          
              var refElement=null;
          
              var dragActive=0;
          
              var draging=0;
          
          function readyDrag(){
          
    dragActive          =1;
          
              if(event.srcElement.tagName!="DIV")
          
                  return;
          
    dragElement          =event.srcElement.parentNode;
          
    tmpElement          =dragElement.cloneNode(true);
          
    tmpElement.style.filter          ="alpha(opacity=90)";
          
    tmpElement.style.zIndex          =2;
          
    dragElement.style.zIndex          =1;
          
    tmpElement.style.position          ="absolute";
          
              if(dragElement.parentNode.tagName!="BODY"){
          
        dragElement.style.left          =dragElement.offsetLeft+dragElement.parentNode.style.pixelLeft;
          
        dragElement.style.top          =dragElement.offsetTop+dragElement.parentNode.style.pixelTop;
          
    }
          
    downX          =event.clientX;
          
    downY          =event.clientY;
          
    tmp_o_x          =dragElement.style.pixelLeft;
          
    tmp_o_y          =dragElement.style.pixelTop;
          
    tmpElement.style.visibility          ="hidden";
          
    document.body.appendChild(tmpElement);
          
    document.onmousemove          =startDrag;
          
    }
          
    document.onmouseup          =endDrag;
          
          function startDrag(){
          
              if(dragActive==1&&event.button==1&&dragElement!=null&&tmpElement!=null){
          
        tmpElement.style.visibility          ="visible";
          
        tmpElement.style.left          =tmp_o_x+event.clientX-downX;
          
        tmpElement.style.top          =tmp_o_y+event.clientY-downY;
          
        dragElement.style.backgroundColor          ="#CCCCCC";
          
        document.body.style.cursor          ="move";
          
        draging          =1;
          
    }
          
}
          
          function endDrag(){
          
              if(dragActive==1&&tmpElement!=null){
          
                  if(draging==1){
          
            dragElement.removeNode(          true);
          
            draging          =0;
          
        }
          
        tmpElement.style.filter          ="alpha(opacity=100)";
          
        tmpElement.style.zIndex          =1;
          
        document.body.style.cursor          ="default";
          
                  if(refElement!=null&&refElement.parentNode!=null&&refElement.parentNode.tagName!="BODY"){
          
            tmpElement.style.width          =refElement.parentNode.style.width;
          
            tmpElement.style.position          ="";
          
            refElement.parentNode.insertBefore(tmpElement,refElement);
          
        }
          
    }
          
    dragElement          =null;
          
    tmpElement          =null;
          
    dragActive          =0;
          
}
          
          function readyInsert(){
          
              if(dragActive==1){
          
                  var element=event.srcElement;
          
                  if(element==dragElement)return;
          
                  if(element.tagName!="DIV")
          
                      return;
          
                  if(element.className=="dragBar"||element.className=="textSheet"||element.className=="blankBar")
          
            element          =element.parentNode;
          
        element.style.backgroundColor          ="#CCCCCC";
          
        element.style.filter          ="alpha(opacity=50)";
          
        refElement          =element;
          
    }
          
}
          
          function failInsert(){
          
              var element=event.srcElement;
          
              if(element.tagName!="DIV")
          
                  return;
          
              try{
          
                  if(element.className=="dragBar"||element.className=="textSheet"||element.className=="blankBar")
          
            element          =element.parentNode;
          
    }          catch(e){}
          
    element.style.filter          ="alpha(opacity=100)";
          
    element.style.backgroundColor          ="#FFFFFF";
          
    refElement          =null;
          
}
          
document.onselectstart          =function(){return false}
          
          </script>
          
          </head>
          

          
          <body>
          
          <div id="div_one" class="div_one" style="position:absolute; left:116px; top:137px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
          
            <div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">Window</div>
          
          <div class="textSheet" style="border:1px solid #996666;">Content<br>
          
  Content          <br>
          
  Content          <br>
          
  Content            <br>
          
          </div>
          
          <div class="blankBar" style="height:10px"></div></div>
          
          <div id="grid1" style="position:absolute; left:534px; top:37px; width:336px; height:15px; z-index: 100; visibility: visible;">
          
            <div style="height:20px;z-index:2;" onMouseOver="readyInsert()" onMouseOut="failInsert();">把層拖動到這兒</div>
          
          </div>
          
          <div id="grid2" style="position:absolute; left:20px; top:40px; width:494px; height:15px; z-index: 100; visibility: visible;">
          
            <div style="height:20px;z-index:2; background-image:url()" onMouseOver="readyInsert()" onMouseOut="failInsert();">把層拖動到這兒</div>
          
          </div>
          
          <div id="div_one" class="div_one" style="position:absolute; left:204px; top:277px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
          
            <div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">BBS</div>
          
            <div class="textSheet" style="border:1px solid #996666;">Content</div>
          
            <div class="blankBar" style="height:10px"></div>
          
          </div>
          
          <div id="div_one" class="div_one" style="position:absolute; left:561px; top:195px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
          
            <div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">Log</div>
          
            <div class="textSheet" style="border:1px solid #996666;">Content<br>
          
    Content          <br>
          
    Content              <br>
          
  Content          <br>
          
          </div>
          
            <div class="blankBar" style="height:10px"></div>
          
          </div>
          
          <div id="div_one" class="div_one" style="position:absolute; left:438px; top:74px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
          
            <div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">Worker</div>
          
            <div class="textSheet" style="border:1px solid #996666;">Content</div>
          
            <div class="blankBar" style="height:10px"></div>
          
          </div>
          
          <div id="div_one" class="div_one" style="position:absolute; left:206px; top:406px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
          
            <div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">Tools</div>
          
            <div class="textSheet" style="border:1px solid #996666;">Content</div>
          
            <div class="blankBar" style="height:10px"></div>
          
          </div>
          
          </body>
          
          </html>
          

	
          posted on 2007-12-06 11:32 lk 閱讀(438) 評論(0)  編輯  收藏  所屬分類: ajax&js 、html 
          

          







          
	    
    




          








          

				
	



          



    







          
        
	




主站蜘蛛池模板：
福建省|
神木县|
凤翔县|
杭锦旗|
咸宁市|
乌兰浩特市|
玉龙|
孟村|
鄯善县|
龙里县|
凤冈县|
磐安县|
沧源|
天全县|
湘阴县|
盖州市|
开江县|
嘉祥县|
玛多县|
永春县|
呈贡县|
高安市|
边坝县|
凌海市|
湖北省|
沙雅县|
吉木萨尔县|
台安县|
东安县|
电白县|
麻江县|
德令哈市|
额尔古纳市|
新建县|
淮南市|
深州市|
吐鲁番市|
绥江县|
桂东县|
扬州市|
静宁县|