首页
所有分类
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 相关文章推荐
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
javascript无刷新评论实现方法
May 13 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
jQuery实现大图轮播
Feb 13 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 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
声卡驱动(1) Sunmao(1) 蓝屏(1) Debian(1) 鸿蒙(2) 鸿蒙3.0(1) RustDesk(1) win7(2) 输入法(2) 滚动条(1)
You might like
GD输出汉字的函数的分析
2006/10/09 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
javascript判断office版本示例
2014/04/11 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
最丑的时钟效果！js canvas时钟制作方法
2016/08/15 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
React精髓！一篇全概括小结(急速)
2019/05/23 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
matplotlib设置legend图例代码示例
2017/12/19 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
python3 map函数和filter函数详解
2019/08/26 Python
6行Python代码实现进度条效果（Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库）
2020/01/06 Python
详解python 内存优化
2020/08/17 Python
静态变量和实例变量的区别
2015/07/07 面试题
学雷锋宣传标语
2014/06/25 职场文书
幼儿园教师师德师风演讲稿：爱我所爱 无悔青春
2014/09/10 职场文书
2014年技术员工作总结
2014/11/18 职场文书
财务会计岗位职责
2015/02/03 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书