javascript 拖动表格行实现代码

网络编程 2024/11/16 佚名

3 2 1

行拖动的实现思路非常简单，选中一行，往上拖就与上面的行交换位置，往下拖就与下面的行交换位置。问题是如何得到交换行。我见过一个非常详细的教程，它会把表格里的每一行的高度与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 "on" + type, callback );
    }
    //移除事件
    var removeEvent = document.removeEventListener "on" + type, callback);
    }
    //精确获取样式
    var getStyle = document.defaultView "TD"){
        tr = tr.parentNode
        dragManager.clientY = y;
        if( dragObj !== tr){
         tr.parentNode.insertBefore(dragObj, (down "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 "on" + type, callback );
 }
 //移除事件
 var removeEvent = document.removeEventListener "on" + type, callback);
 }
 //精确获取样式
 var getStyle = document.defaultView "TD"){
     tr = tr.parentNode
     dragManager.clientY = y;
     if( dragObj !== tr){
      tr.parentNode.insertBefore(dragObj, (down "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下测试通过哦。

拖动表格行

标签：

拖动表格行

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

狼山资源网 Copyright www.pvsay.com

评论“javascript 拖动表格行实现代码”

javascript 拖动表格行实现代码

暂无“javascript 拖动表格行实现代码”评论...

www.pvsay.com 狼山资源网

29,905影音资源

44,626技术资源

11,817软件资源

578,645站长资源

javascript 拖动表格行实现代码

拖动表格行

jQuery bind事件使用详解

精心收集的jQuery常用的插件1000

评论“javascript 拖动表格行实现代码”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

javascript 拖动表格行实现代码

拖动表格行

jQuery bind事件使用详解

精心收集的jQuery常用的插件1000

评论“javascript 拖动表格行实现代码”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存