js table操作 ------ 拖拽行为并且使其自动贴附-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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>   
本文转自博客园执着的笨蛋的博客,原文链接:js table操作 ------ 拖拽行为并且使其自动贴附,如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章