随笔 - 154  文章 - 60  trackbacks - 0
<2007年11月>
日一二三四五六
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

声明：

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

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

支持开源，尊重他人的劳动！！

常用链接

留言簿(3)

随笔分类(148)

随笔档案(143)

收藏夹(2)

其他

学习（技术）

观察思考（非技术）

搜索

  •  

最新评论

阅读排行榜

评论排行榜

js table操作 ------ 拖拽行为并且使其自动贴附
代码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 阅读(1493) 评论(1)  编辑  收藏 所属分类: ajax&js

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

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 lk Powered by: 博客园 模板提供：沪江博客