备案控制台
开发者社区 开发与运维 文章 正文

js table操作 ------ 拖拽行为并且使其自动贴附

2017-12-07 1066
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
代码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操作 ------ 拖拽行为并且使其自动贴附 ，如需转载请自行联系原博主。
文章标签：
JavaScript
前端开发
关键词：
JavaScript操作
JavaScript行为
JavaScript拖拽
JavaScript Table
JavaScript table操作
walb呀
目录
相关文章
桃李春风一杯酒
|
12天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略：从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互，涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习，开发者能掌握动态改变网页内容、结构和样式的技能，实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用，助你提升前端开发能力。
桃李春风一杯酒
22 0
众所周知
|
2天前
|
JavaScript 前端开发 UED
在 JavaScript 中，异步编程和回调函数是处理非阻塞操作（如网络请求、文件读写等）的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作，提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现，避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数，常用于处理网络请求等。然而，回调函数存在嵌套问题和错误处理困难，因此出现了Promises和async/await等更优解决方案。
众所周知
10 3
晓同哇哇~
|
6天前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
晓同哇哇~
14 0
众所周知
|
1天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM（文档对象模型）
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素（getElementById, getElementsByClassName等）、修改内容（innerHTML, innerText, textContent）、改变属性、添加/删除元素（appendChild, removeChild）和调整样式。此外，addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
众所周知
6 2
宁波阿成.
|
3天前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
宁波阿成.
9 3
众所周知
|
3天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中，this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下，直接调用函数时`this`指全局对象，严格模式下为`undefined`。作为对象方法调用时，`this`指向该对象。用`new`调用构造函数时，`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中，`this`可能不直观，箭头函数和绑定方法可帮助管理`this`的行为。
众所周知
10 1
晓同哇哇~
|
6天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
晓同哇哇~
11 0
晓同哇哇~
|
6天前
|
移动开发 JavaScript 前端开发
javascript监听浏览器离开、进入行为
javascript监听浏览器离开、进入行为
晓同哇哇~
11 0
小华qvq
|
6天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
小华qvq
13 0
嘘~！
|
6天前
|
JavaScript 前端开发 索引
js操作字符串的方法
js操作字符串的方法
嘘~！
14 2