首页
所有分类
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实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
JS 常用校验函数
Mar 26 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
详解javascript replace高级用法
Feb 17 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) Windows Server 2022(3) dataBinding(1) NTP(1) Hive(5) Quartz(1) RestTemplate(1) ip2region(1) 反射(1) HttpClient(1)
You might like
php实现文件下载功能的几个代码分享
2014/05/10 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
XML的代替者----JSON
2007/07/21 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
python fabric实现远程部署
2017/01/05 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
python调试神器PySnooper的使用
2019/07/03 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
Lookfantastic日本官网：英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
MSC邮轮官方网站：加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
马来西亚户外装备商店：PTT Outdoor
2019/07/13 全球购物
linux面试题参考答案（5）
2016/11/05 面试题
青年创业培训欢迎词
2014/01/10 职场文书
会计工作决心书
2014/03/11 职场文书
车辆转让协议书
2014/04/15 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS