隨筆 - 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 閱讀(386) 評論(0)  編輯  收藏 所屬分類: ajax&jshtml
          主站蜘蛛池模板: 区。| 高淳县| 当阳市| 东辽县| 桃源县| 三台县| 鹤峰县| 永清县| 涟水县| 琼中| 渝北区| 周口市| 东光县| 额尔古纳市| 石狮市| 涿州市| 台江县| 巴彦淖尔市| 紫阳县| 兴化市| 文昌市| 湟源县| 游戏| 天长市| 徐闻县| 广安市| 安宁市| 蒲城县| 西宁市| 吉林省| 将乐县| 建始县| 仁化县| 大冶市| 濮阳市| 苍南县| 康保县| 石棉县| 孝昌县| 江源县| 绥阳县|