隨筆 - 154 
文章 - 60 
trackbacks - 0


           
	

          

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

          

          
			


          
	
          聲明：
          

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

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

          

			

          常用鏈接
          


          留言簿(3)
          




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




          搜索
          

            
	
          • 
		
          •  
	
            • 

          


          最新評論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評論排行榜
          


          		
	

          

          
	
					


          
	
	代碼：
          

          <html>
          
          <head>
          
          <title>DRAG the DIV</title>
          
          <style>
          
*          {font-size:12px}
          
.dragTable          {
          
    font-size          :12px;
          
    border-top          :1px solid #3366cc;
          
    margin-bottom          : 10px;
          
    width          :100%;
          
    background-color          :#FFFFFF;
          
          }
          
.dragTR          {
          
    cursor          :move;
          
    color          :#7787cc;
          
    background-color          :#e5eef9;
          
          }
          
td          {vertical-align:top;}
          
#parentTable          {
          
    border-collapse          :collapse;
          
    letter-spacing          :25px;
          
          }
          
          </style>
          
          <script defer>
          
          /****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/
          
              var draged=false;
          
    tdiv          =null;
          
          function dragStart(){
          
    ao          =event.srcElement;
          
              if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;
          
              else return;
          
    draged          =true;
          
    tdiv          =document.createElement("div");
          
    tdiv.innerHTML          =ao.outerHTML;
          
    tdiv.style.display          ="block";
          
    tdiv.style.position          ="absolute";
          
    tdiv.style.filter          ="alpha(opacity=70)";
          
    tdiv.style.cursor          ="move";
          
    tdiv.style.width          =ao.offsetWidth;
          
    tdiv.style.height          =ao.offsetHeight;
          
    tdiv.style.top          =getInfo(ao).top;
          
    tdiv.style.left          =getInfo(ao).left;
          
    document.body.appendChild(tdiv);
          
    lastX          =event.clientX;
          
    lastY          =event.clientY;
          
    lastLeft          =tdiv.style.left;
          
    lastTop          =tdiv.style.top;
          
              try{
          
        ao.dragDrop();    
          
    }          catch(e){}
          
}
          
          function draging(){//重要:判斷MOUSE的位置
          
              if(!draged)return;
          
              var tX=event.clientX;
          
              var tY=event.clientY;
          
    tdiv.style.left          =parseInt(lastLeft)+tX-lastX;
          
    tdiv.style.top          =parseInt(lastTop)+tY-lastY;
          
              for(var i=0;i<parentTable.cells.length;i++){
          
                  var parentCell=getInfo(parentTable.cells[i]);
          
                  if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
          
                      var subTables=parentTable.cells[i].getElementsByTagName("table");
          
                      if(subTables.length==0){
          
                          if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
          
                    parentTable.cells[i].appendChild(ao);
          
                }
          
                          break;
          
            }
          
                      for(var j=0;j<subTables.length;j++){
          
                          var subTable=getInfo(subTables[j]);
          
                          if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
          
                    parentTable.cells[i].insertBefore(ao,subTables[j]);
          
                              break;
          
                }          else{
          
                    parentTable.cells[i].appendChild(ao);
          
                }              
          
            }
          
        }
          
    }
          
}
          

          
          function dragEnd(){
          
              if(!draged)return;
          
    draged          =false;
          
    mm          =ff(150,15);
          
}
          
          function getInfo(o){//取得坐標
          
              var to=new Object();
          
    to.left          =to.right=to.top=to.bottom=0;
          
              var twidth=o.offsetWidth;
          
              var theight=o.offsetHeight;
          
              while(o!=document.body){
          
        to.left          +=o.offsetLeft;
          
        to.top          +=o.offsetTop;
          
        o          =o.offsetParent;
          
    }
          
        to.right          =to.left+twidth;
          
        to.bottom          =to.top+theight;
          
              return to;
          
}
          
          function ff(aa,ab){//從GOOGLE網站來,用于恢復位置
          
              var ac=parseInt(getInfo(tdiv).left);
          
              var ad=parseInt(getInfo(tdiv).top);
          
              var ae=(ac-getInfo(ao).left)/ab;
          
              var af=(ad-getInfo(ao).top)/ab;
          
              return setInterval(function(){if(ab<1){
          
                            clearInterval(mm);
          
                            tdiv.removeNode(          true);
          
                            ao          =null;
          
                                      return
          
                        }
          
                    ab          --;
          
                    ac          -=ae;
          
                    ad          -=af;
          
                    tdiv.style.left          =parseInt(ac)+"px";
          
                    tdiv.style.top          =parseInt(ad)+"px"
          
                }
          
,aa          /ab)
          
}
          
          function inint(){//初始化
          
              for(var i=0;i<parentTable.cells.length;i++){
          
                  var subTables=parentTable.cells[i].getElementsByTagName("table");
          
                  for(var j=0;j<subTables.length;j++){
          
                      if(subTables[j].className!="dragTable")break;
          
            subTables[j].rows[          0].className="dragTR";
          
            subTables[j].rows[          0].attachEvent("onmousedown",dragStart);
          
            subTables[j].attachEvent(          "ondrag",draging);
          
            subTables[j].attachEvent(          "ondragend",dragEnd);
          
        }
          
    }
          
}
          
inint();
          
          </script>
          
          </head>
          
          <body>
          
          <table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
          
          <tr >
          
              <td width="25%" valgin="top">
          
                  <table border=0 class="dragTable" cellspacing="0">
          
                      <tr>
          
                          <td><b>GMAIL</b></td>
          
                      </tr>
          
                      <tr>
          
                          <td>暫時無法顯示GMAIL內容</td>
          
                      <tr>
          
                  </table><table border=0 class="dragTable" cellspacing="0">
          
                      <tr>
          
                          <td>新浪體育</td>
          
                      </tr>
          
                      <tr>
          
                          <td>解剖威隊獨門利器FW28 2萬轉引擎匹配超級變速器頒獎：辛吉斯欣喜能以冠軍起步 印度搭檔創下紀錄法新社前瞻冬奧短道速滑：中韓唱主角 美加施冷箭</td>
          
                      <tr>
          
                  </table><table border=0 class="dragTable" cellspacing="0">
          
                      <tr>
          
                          <td>焦點</td>
          
                      </tr>
          
                      <tr>
          
                          <td>京廣線中斷4小時20臨客返漢晚點
          
中國新聞網-湖北分社 - 所有 235 相關報道 ?哈馬斯已有總理人選
          
解放日報報業集團 - 所有 489 相關報道 ?陳水扁是兩岸關系麻煩制造者
          
武漢晨報 - 所有 179 相關報道 ?          </td>
          
                      <tr>
          
                  </table>
          
              </td>
          
              <td width="25%">
          
                  <table border=0 class="dragTable" cellspacing="0">
          
                      <tr>
          
                          <td>中關村在線</td>
          
                      </tr>
          
                      <tr>
          
                          <td>新年行情速遞 雙敏板卡低價推薦 終于等到了，映泰6600GT一降降一百 羅技G15游戲鍵盤熱力促銷，代購價僅529元 </td>
          
                      <tr>
          
                  </table></td>
          
              <td width="25%">
          
                  <table border=0 class="dragTable" cellspacing="0">
          
                      <tr>
          
                          <td>網易商業</td>
          
                      </tr>
          
                      <tr>
          
                          <td>上海GDP增幅去年出現回落應對反傾銷 中國鞋企聯手對抗歐盟尹家緒操盤南方汽車 長安謀求曲線整體境外上市</td>
          
                      <tr>
          
                  </table>
          
              </td>
          
          </tr>
          
          </table>
          
          </body>
          
          </html>
          

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

          







          
	    
    




          








          

				
	



          



    







          
        
	




主站蜘蛛池模板：
汾阳市|
托里县|
通榆县|
伊通|
嘉义市|
仲巴县|
绍兴县|
桃源县|
双桥区|
堆龙德庆县|
桦甸市|
永新县|
信阳市|
会昌县|
托克托县|
微博|
丹巴县|
和林格尔县|
绥棱县|
兴文县|
鄂伦春自治旗|
铜陵市|
扶绥县|
乌兰察布市|
花莲县|
武汉市|
奇台县|
马边|
舒兰市|
肥东县|
安阳市|
小金县|
仁怀市|
盐边县|
元朗区|
镇原县|
宾阳县|
上饶县|
兴隆县|
清涧县|
新泰市|