隨筆 - 154 
文章 - 60 
trackbacks - 0


           
	

          

          
	
		
          
			
          
	
          
		
          <2007年11月>
          
	
          日一二三四五六
          28293031123
          45678910
          11121314151617
          18192021222324
          2526272829301
          2345678
          

          

          
			


          
	
          聲明：
          

          
          該blog是為了收集資料，認識朋友，學(xué)習(xí)、提高技術(shù)，所以本blog的內(nèi)容除非聲明，否則一律為轉(zhuǎn)載！！
          

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

          

			

          常用鏈接
          


          留言簿(3)
          




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




          搜索
          

            
	
          • 
		
          •  
	
            • 

          


          最新評論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評論排行榜
          


          		
	

          

          
	
					


          
	
	代碼1：
          

           <html>   
          
            <head>   
          
            <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   
          
            <title>JK:支持民族工業(yè),盡量少買X貨</title>   
          
            <script   language="javascript">   
          
            var   beginMoving=false;   
          
            function   MouseDownToMove(obj){   
          
  obj.style.zIndex          =1;   
          
  obj.mouseDownY          =event.clientY;   
          
  obj.mouseDownX          =event.clientX;   
          
  beginMoving          =true;   
          
  obj.setCapture();   
          
  }             
          
    
          
            function   MouseMoveToMove(obj){   
          
                    if(!beginMoving)   return   false;   
          
  obj.style.top             =   (event.clientY-obj.mouseDownY);   
          
  obj.style.left             =   (event.clientX-obj.mouseDownX);   
          
  }             
          
            function   MouseUpToMove(obj){   
          
            if(!beginMoving)   return   false;   
          
  obj.releaseCapture();   
          
  obj.style.top          =0;   
          
  obj.style.left          =0;   
          
  obj.style.zIndex          =0;   
          
  beginMoving          =false;   
          
            var   tempTop=event.clientY-obj.mouseDownY;   
          
            var   tempRowIndex=(tempTop-tempTop%25)/25;   
          
            if(tempRowIndex+obj.rowIndex   <0   )tempRowIndex=-1;   
          
            else   tempRowIndex=tempRowIndex+obj.rowIndex;   
          
            if(tempRowIndex   >=   obj.parentElement.rows.length-1)   tempRowIndex   =   obj.parentElement.rows.length-1;   
          
  obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);   
          
  }             
          
    
          
            </script>   
          
            </head>   
          
            <body   >   
          
    
          
            <TABLE   WIDTH="300"   BORDER="1"   >   
          
    
          
            <TR   bgcolor=#ffffff   style='height:25;position:relative;'   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'><TD   bgcolor=blue>0</TD><TD>0</TD><TD>0</TD></TR>   
          
            <TR   bgcolor=#ffffff   style='height:25;position:relative;'   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'><TD   bgcolor=black>1</TD><TD>1</TD><TD>1</TD></TR>   
          
            <TR   bgcolor=#ffffff   style='height:25;position:relative;'   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'><TD   bgcolor=red>2</TD><TD>2</TD><TD>2</TD></TR>   
          
            <TR   bgcolor=#ffffff   style='height:25;position:relative;'   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'><TD>3</TD><TD>3</TD><TD>3</TD></TR>   
          
            <TR   bgcolor=#ffffff   style='height:25;position:relative;'   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'><TD>4</TD><TD>4</TD><TD>4</TD></TR>   
          
            <TR   bgcolor=#ffffff   style='height:25;position:relative;'   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'><TD>5</TD><TD>5</TD><TD>5</TD></TR>   
          
            <TR   bgcolor=#ffffff   style='height:25;position:relative;'   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'><TD>6</TD><TD>6</TD><TD>6</TD></TR>   
          
            <TR   bgcolor=#ffffff   style='height:25;position:relative;'   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'><TD>7</TD><TD>7</TD><TD>7</TD></TR>   
          
            </TABLE>   
          
    
          
            </body>   
          
            </html>
          

          

          
代碼2：
          

          

          <html>   
          
            <head>   
          
            <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   
          
            <title>JK:支持民族工業(yè),盡量少買X貨</title>   
          
            <style>   
          
  .removableObj   
          
            {   
          
  height          :25;position:relative;   
          
            }             
          
            </style>   
          
            <script   language="javascript">   
          
            var   beginMoving=false;   
          
            var   sourceObj=null;   
          
            var   objectObj=null;   
          
            var   objectObj2=null;   
          
            function   MouseDownToMove(obj){   
          
  obj.style.zIndex          =1;   
          
  obj.mouseDownY          =event.clientY;   
          
  obj.mouseDownX          =event.clientX;   
          
  beginMoving          =true;   
          
  obj.setCapture();   
          
  sourceObj          =obj;   
          
  objectObj          =null;   
          
  }             
          
    
          
            function   MouseMoveToMove(obj){   
          
                    if(!beginMoving)   return   false;   
          
  obj.style.top             =   (event.clientY-obj.mouseDownY);   
          
  obj.style.left             =   (event.clientX-obj.mouseDownX);   
          
  }             
          
            function   MouseUpToMove(obj){   
          
            if(!beginMoving)   return   false;   
          
  obj.releaseCapture();   
          
  obj.style.top          =0;   
          
  obj.style.left          =0;   
          
  obj.style.zIndex          =0;   
          
  beginMoving          =false;   
          
  window.setTimeout(          "swapFun()",20);   
          
  }             
          
    
          
            function   MouseOverFun(obj)   
          
            {   
          
            if(obj==sourceObj)   return   false;   
          
  objectObj          =obj;   
          
  }             
          
    
          
            function   MouseOverFun2(obj)   
          
            {   
          
  objectObj2          =obj;   
          
  }             
          
    
          
            function   swapFun()   
          
            {   
          
            if(sourceObj!=null   &&   objectObj!=null)   objectObj.insertAdjacentElement("beforeBegin",sourceObj);   
          
            else   if(sourceObj!=null   &&   objectObj2!=null)   objectObj2.insertAdjacentElement("beforeEnd",sourceObj);   
          
  sourceObj          =null;   
          
  objectObj          =null;   
          
  objectObj2          =null;   
          
  }             
          
            </script>   
          
            </head>   
          
    
          
            <body>   
          
    
          
            <table   border="1"   width="100%"   height="58">   
          
                <tr>   
          
                    <td   width="34%"   valign="top"   height="46"   onmouseover="MouseOverFun2(this);"   >   
          
                        <table   border="1"   width="100%"   bgcolor="#99CCFF"   class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);"   >   
          
                            <tr>   
          
                                <td   width="23%">和</td>   
          
                                <td   width="21%">飛過海</td>   
          
                            </tr>   
          
                            <tr>   
          
                                <td   width="23%">　</td>   
          
                                <td   width="21%">　</td>   
          
                            </tr>   
          
                        </table><table   border="1"   width="100%"   bgcolor="#FFCCFF"   class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);"   >   
          
                            <tr>   
          
                                <td   width="21%">還是</td>   
          
                                <td   width="35%">護身符哈</td>   
          
                            </tr>   
          
                            <tr>   
          
                                <td   width="21%">，</td>   
          
                                <td   width="35%">和是是護</td>   
          
                            </tr>   
          
                        </table>   
          
                <table   border="1"   width="100%"   bgcolor="#00CC99"   class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);"   >   
          
                            <tr>   
          
                                <td   width="21%">還是</td>   
          
                                <td   width="9%">　</td>   
          
                                <td   width="35%">呵呵</td>   
          
                            </tr>   
          
                            <tr>   
          
                                <td   width="21%">，</td>   
          
                                <td   width="9%">　</td>   
          
                                <td   width="35%">和</td>   
          
                            </tr>   
          
                        </table>   
          
                
          
                    </td>   
          
                    <td   width="32%"   valign="top"   height="52"   onmouseover="MouseOverFun2(this);"   >   
          
                <table   border="1"   width="100%"   bgcolor="#FF0000"   class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);"   >   
          
                            <tr>   
          
                                <td   width="21%">還是</td>   
          
                            </tr>   
          
                            <tr>   
          
                                <td   width="21%">，</td>   
          
                            </tr>   
          
                        </table>           
          
                        <table   border="1"   width="100%"   bgcolor="#00FFFF"   class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);"   >   
          
                            <tr>   
          
                                <td   width="21%">還是</td>   
          
                                <td   width="35%">護身符哈</td>   
          
                                <td   width="21%">　</td>   
          
                                <td   width="23%">呵呵</td>   
          
                            </tr>   
          
                            <tr>   
          
                                <td   width="21%">，</td>   
          
                                <td   width="35%">和是是護</td>   
          
                                <td   width="21%">　</td>   
          
                                <td   width="23%">和</td>   
          
                            </tr>   
          
                        </table>   
          
    
          
            </td>   
          
                    <td   width="34%"   valign="top"   height="52"   onmouseover="MouseOverFun2(this);"   >   
          
                <table   border="1"   width="100%"   bgcolor="#FF9966"   class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);"   >   
          
                            <tr>   
          
                                <td   width="21%">還是</td>   
          
                                <td   width="35%">護身符哈</td>   
          
                                <td   width="21%">　</td>   
          
                                <td   width="23%">呵呵</td>   
          
                            </tr>   
          
                            <tr>   
          
                                <td   width="21%">，</td>   
          
                                <td   width="35%">和是是護</td>   
          
                                <td   width="21%">　</td>   
          
                                <td   width="23%">和</td>   
          
                            </tr>   
          
                        </table>           
          
                        <table   width="100%"   border="1"   bgcolor="#FFFFCC"   class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);"   >   
          
                            <tr>   
          
                                <td   width="87">&nbsp;輸多發(fā)</td>   
          
                                <td   width="115">嘎撒遞歸</td>   
          
                            </tr>   
          
                            <tr>   
          
                                <td   width="87">嘎大嘎</td>   
          
                                <td   width="115">大幅度</td>   
          
                            </tr>   
          
                            <tr>   
          
                                <td   width="87">過大撒</td>   
          
                                <td   width="115">嘎</td>   
          
                            </tr>   
          
                        </table></td>   
          
                </tr>   
          
            </table>   
          
            </body>   
          
            </html>   
          

          

	
          posted on 2007-11-29 17:20 lk 閱讀(1506) 評論(1)  編輯  收藏  所屬分類: ajax&js 
          

          







          
	    
    


          
FeedBack:

          
	

		
          
			
          
			
          # re: js table操作 ------ 拖拽行為并且使其自動貼附 2007-12-12 19:15 jeasonzhao
          
				
          思路不錯，可以更加進一步，構(gòu)造的時候不需要繁瑣的輸入onmouse***函數(shù)

          在實際測試的時候，有定位的部準確的問題，可以使用elementFromPoint函數(shù)解決這個問題  回復(fù)  更多評論
            
			
          
		
          
	




          








          

				
	



          



    







        
	




主站蜘蛛池模板：
乐清市|
巴林左旗|
六枝特区|
会同县|
五华县|
砚山县|
兴宁市|
乌鲁木齐市|
静乐县|
荆州市|
卢龙县|
松原市|
聊城市|
绥阳县|
西乌|
文水县|
石景山区|
汝阳县|
定远县|
鄂尔多斯市|
甘孜县|
祁门县|
额尔古纳市|
吉林市|
泰宁县|
肇东市|
武清区|
清涧县|
霍山县|
宁安市|
信阳市|
同德县|
襄樊市|
青神县|
宣化县|
井研县|
延长县|
交城县|
慈溪市|
天长市|
孟州市|