首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript 拖动表格行实现代码

Posted in Javascript onMay 05, 2011

行拖动的实现思路非常简单，选中一行，往上拖就与上面的行交换位置，往下拖就与下面的行交换位置。问题是如何得到交换行。我见过一个非常详细的教程，它会把表格里的每一行的高度与Y坐标计算出来，换言之，都时是比较e.pageX是否在[rowTop,rowBottom]区间之内。但这也带来第二个问题，有多少行就有多个这样的区间。于是解法就变成取事件源对象，然后再往上取其父对象，如果其父对象是TR元素，就取其[rowTop,rowBottom]区间....思路非常直接，同时也客观做出一个限制——不能使用代理拖动。先不谈是拖动代理还是拖动实物，光是在移动鼠标的过程要做的计算量就非常大，幸好还在IE的承受范围之内。有更好的方法吗？

人之所以先入为主，因为他就握着这么几把锁匙。如果他手上的锁匙非常多时，他在开门时就会稍微停下来，认真挑选了。因此熟悉掌握越多的原生API就越好，我们就才获取更优的选项。换一个思路，在拖动时（mousedown）保存当前行及其样式与坐标，拖动中取得鼠标所在位置上的元素，这个元素是使用一个巧妙的API取得document.elementFromPoint(x,y)。通常情况，我们取得的是TD，当然如果你在里面塞进一个DIV，那就是DIV罗。然后我们再取得其TR元素，然后比较mousedown时保存的TR元素是不是同一个元素，不是同一个元素，我们才做进一步的操作。这时我们就要判其是向上移向下移，简单的减法而已。接着是交换两行，使用insertBefore。最后当mouseup时，还原行的样式就是！由于没有复杂的坐标计算，整个程式出奇的高效！

完整演示代码

<!doctype html>
<html>
 <head>
  <title>表格行拖动</title>
  <script>
     window.onload = function(){
    //绑定事件
    var addEvent = document.addEventListener ? function(el,type,callback){
     el.addEventListener( type, callback, !1 );
    } : function(el,type,callback){
     el.attachEvent( "on" + type, callback );
    }
    //移除事件
    var removeEvent = document.removeEventListener ? function(el,type,callback){
     el.removeEventListener( type, callback );
    } : function(el,type,callback){
     el.detachEvent( "on" + type, callback);
    }
    //精确获取样式
    var getStyle = document.defaultView ? function(el,style){
     return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
    } : function(el,style){
     style = style.replace(/\-(\w)/g, function($, $1){
      return $1.toUpperCase();
     });
     return el.currentStyle[style];
    }
    var dragManager = {
     clientY:0,
     draging:function(e){//mousemove时拖动行
      var dragObj = dragManager.dragObj;
      if(dragObj){
       e = e || event;
       if(window.getSelection){//w3c
        window.getSelection().removeAllRanges();
       }else if(document.selection){
        document.selection.empty();//IE
       }
       var y = e.clientY;
       var down = y > dragManager.clientY;//是否向下移动
       var tr = document.elementFromPoint(e.clientX,e.clientY);
       if(tr && tr.nodeName == "TD"){
        tr = tr.parentNode
        dragManager.clientY = y;
        if( dragObj !== tr){
         tr.parentNode.insertBefore(dragObj, (down ? tr.nextSibling : tr));
        }
       };
      }
     },
     dragStart:function(e){
      e = e || event;
      var target = e.target || e.srcElement;
      if(target.nodeName === "TD"){
       target = target.parentNode;
       dragManager.dragObj = target;
       if(!target.getAttribute("data-background")){
        var background = getStyle(target,"background-color");
        target.setAttribute("data-background",background)
       }
       //显示为可移动的状态
       target.style.backgroundColor = "#ccc";
       target.style.cursor = "move";
       dragManager.clientY = e.clientY;
       addEvent(document,"mousemove",dragManager.draging);
       addEvent(document,"mouseup",dragManager.dragEnd);
      }
     },
     dragEnd:function(e){
      var dragObj = dragManager.dragObj
      if (dragObj) {
       e = e || event;
       var target = e.target || e.srcElement;
       if(target.nodeName === "TD"){
        target = target.parentNode;
        dragObj.style.backgroundColor = dragObj.getAttribute("data-background");
        dragObj.style.cursor = "default";
        dragManager.dragObj = null;
        removeEvent(document,"mousemove",dragManager.draging);
        removeEvent(document,"mouseup",dragManager.dragEnd);
       }
      }
     },
     main:function(el){
      addEvent(el,"mousedown",dragManager.dragStart);
     }
    }
    var el = document.getElementById("table");
    dragManager.main(el);
   }
   
  </script>
  <style>
   .table{
    width:60%;
    border: 1px solid red;
    border-collapse: collapse;
   }
   .table td{
    border: 1px solid red;
    height: 20px;
   }
  </style>
 </head>
 <body>
  <h1>表格行拖动</h1>
  <table id="table" class="table">
   <tbody>
    <tr>
     <td>1</td>
     <td>One</td>
     <td>dom.require</td>
    </tr>
    <tr id="2" >
     <td class="2">2</td>
     <td>Two</td>
     <td>ControlJS </td>
    </tr>
    <tr id="3" >
     <td class="3">3</td>
     <td>Three</td>
     <td>HeadJS</td>
    </tr>
    <tr id="4" >
     <td class="4">4</td>
     <td>Four</td>
     <td>LAB.js</td>
    </tr>
    <tr id="5" >
     <td class="5">5</td>
     <td>Five</td>
     <td>$script.js</td>
    </tr>
    <tr id="6" >
     <td class="6">6</td>
     <td>Six</td>
     <td>NBL.js</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

核心代码

window.onload = function(){
 //绑定事件
 var addEvent = document.addEventListener ? function(el,type,callback){
  el.addEventListener( type, callback, !1 );
 } : function(el,type,callback){
  el.attachEvent( "on" + type, callback );
 }
 //移除事件
 var removeEvent = document.removeEventListener ? function(el,type,callback){
  el.removeEventListener( type, callback );
 } : function(el,type,callback){
  el.detachEvent( "on" + type, callback);
 }
 //精确获取样式
 var getStyle = document.defaultView ? function(el,style){
  return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
 } : function(el,style){
  style = style.replace(/\-(\w)/g, function($, $1){
   return $1.toUpperCase();
  });
  return el.currentStyle[style];
 }
 var dragManager = {
  clientY:0,
  draging:function(e){//mousemove时拖动行
   var dragObj = dragManager.dragObj;
   if(dragObj){
    e = e || event;//清除选区
    if(window.getSelection){//w3c
     window.getSelection().removeAllRanges();
    }else if(document.selection){
     document.selection.empty();//IE
    }
    var y = e.clientY;
    var down = y > dragManager.clientY;//是否向下移动
    var tr = document.elementFromPoint(e.clientX,e.clientY);
    if(tr && tr.nodeName == "TD"){
     tr = tr.parentNode
     dragManager.clientY = y;
     if( dragObj !== tr){
      tr.parentNode.insertBefore(dragObj, (down ? tr.nextSibling : tr));
     }
    };
   }
  },
  dragStart:function(e){
   e = e || event;
   var target = e.target || e.srcElement;
   if(target.nodeName === "TD"){
    target = target.parentNode;
    dragManager.dragObj = target;
    if(!target.getAttribute("data-background")){
     var background = getStyle(target,"background-color");
     target.setAttribute("data-background",background)
    }
    //显示为可移动的状态
    target.style.backgroundColor = "#ccc";
    target.style.cursor = "move";
    dragManager.clientY = e.clientY;
    addEvent(document,"mousemove",dragManager.draging);
    addEvent(document,"mouseup",dragManager.dragEnd);
   }
  },
  dragEnd:function(e){
   var dragObj = dragManager.dragObj
   if (dragObj) {
    e = e || event;
    var target = e.target || e.srcElement;
    if(target.nodeName === "TD"){
     target = target.parentNode;
     dragObj.style.backgroundColor = dragObj.getAttribute("data-background");
     dragObj.style.cursor = "default";
     dragManager.dragObj = null;
     removeEvent(document,"mousemove",dragManager.draging);
     removeEvent(document,"mouseup",dragManager.dragEnd);
    }
   }
  },
  main:function(el){
   addEvent(el,"mousedown",dragManager.dragStart);
  }
 }
 var el = document.getElementById("table");
 dragManager.main(el);
}

实现代码二

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head > 
<title>无标题页</title> 
</head> 
<body> 
<table id="tb1" border="1" cellpadding="3"> 
<tr> 
<th>移动</th> 
<th>数据</th> 
<th>数据</th> 
<th>数据</th> 
</tr> 
<tr> 
<td>*</td> 
<td>11111111111</td> 
<td>sdgergserhserhserh</td> 
<td>awegaw</td> 
</tr> 
<tr> 
<td>*</td> 
<td>222222222</td> 
<td>serherwwwwww</td> 
<td>fafafff</td> 
</tr> 
<tr> 
<td>*</td> 
<td>333333333</td> 
<td>qqqqqqqwewer</td> 
<td>yukyuk</td> 
</tr> 
</table> 
<script type="text/javascript"> 
var curTr = null; 
var tb1 = document.getElementById('tb1'); 
var trs = tb1.getElementsByTagName('tr'); 
tb1.onselectstart = function(){ 
if(curTr){ 
document.selection.empty(); return true; 
} 
}; 
for(var i=1; i<trs.length; i++) { 
var tds = trs[i].getElementsByTagName('td'); 
tds[0].style.cursor = 'move'; 
tds[0].onmousedown = function(){ 
curTr = this.parentNode; 
curTr.style.backgroundColor = '#eff'; 
}; 
tds[0].onmouseover = function() { 
if(curTr && curTr != this.parentNode) { 
this.parentNode.swapNode(curTr); 
} 
} 
} 
document.body.onmouseup = function(){ 
if(curTr){ 
curTr.style.backgroundColor = ''; 
curTr = null; 
} 
}; 
</script> 
</body> 
</html>

注：不兼容firefox，在IE和chrome下测试通过哦。

javascript 拖动表格行实现代码

- Author -

mdxy-dxy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
node.js从数据库获取数据
May 08 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
小试JQuery的AutoComplete插件
May 04 #Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 #Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 #Javascript
Jquery 绑定时间实现代码
May 03 #Javascript
jqgrid 简单学习笔记
May 03 #Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 #Javascript
jQuery之网页换肤实现代码
Apr 30 #Javascript
iOS(1) moviepy(1) iOS16(1) opencv(7) 模糊匹配(1) DNA(2) compose(3) Athens(1) iOS15(1) iPhone(1)
You might like
PHP动态图像的创建
2006/10/09 PHP
discuz安全提问算法
2007/06/06 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
Pycharm学习教程（5） Python快捷键相关设置
2017/05/03 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
Python 实现 T00ls 自动签到脚本代码（邮件+钉钉通知）
2020/07/06 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
美国婴儿和儿童家具网上商店：ABaby.com
2018/07/02 全球购物
法国春天百货官网：Printemps.com
2020/06/29 全球购物
项目合作意向书范本
2014/04/01 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
法定代表人资格证明书
2015/06/18 职场文书
《围炉夜话》110句人生箴言，精辟有内涵，引人深思
2019/10/23 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python