随笔 - 154  文章 - 60  trackbacks - 0
<2007年11月>
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

声明:

该blog是为了收集资料,认识朋友,学习、提高技术,所以本blog的内容除非声明,否则一律为转载!!

感谢那些公开自己技术成果的高人们!!!

支持开源,尊重他人的劳动!!

常用链接

留言簿(3)

随笔分类(148)

随笔档案(143)

收藏夹(2)

其他

学习(技术)

观察思考(非技术)

搜索

  •  

最新评论

阅读排行榜

评论排行榜

代码1:
 <html>   
  
<head>   
  
<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   
  
<title>JK:支持民族工业,尽量少买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:支持民族工业,尽量少买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;输多发</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 阅读(1486) 评论(1)  编辑  收藏 所属分类: ajax&js

FeedBack:
# re: js table操作 ------ 拖拽行为并且使其自动贴附 2007-12-12 19:15 jeasonzhao
思路不错,可以更加进一步,构造的时候不需要繁琐的输入onmouse***函数
在实际测试的时候,有定位的部准确的问题,可以使用elementFromPoint函数解决这个问题  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: