利用JS實(shí)現(xiàn)拖動(dòng)表格行改變順序

2012/11/11 19:42:18作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

【實(shí)例描述】

表格的行可以通過(guò)后臺(tái)命令實(shí)現(xiàn)互換，也可以讓用戶自己使用拖曳的方式完成互換操作。本例學(xué)習(xí)一個(gè)簡(jiǎn)單的拖曳表格行操作。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖拽表格的行-學(xué)無(wú)憂（www.wangbatian.cn）</title>
<style type="text/css">
td{position:relative;
}
body {
 margin-left: 1px;
 margin-top: 1px;
 margin-right: 1px;
 margin-bottom: 1px;
}
</style>
</head>
<body style="margin-left:0px; margin-top:0px;">
<table width="301" border="1" bordercolor="#CCCCCC" id="dragTbl">
<tr>
    <td width="73">序號(hào)</td>
    <td width="52">姓名</td>
    <td width="65">年齡</td>
    <td width="83">地址</td>
</tr>
<tr>
    <td width="73">1</td>
    <td width="52">張三</td>
    <td width="65">22</td>
    <td width="83">北京海淀</td>
</tr>
  <tr>
    <td >2</td>
    <td>王五</td>
    <td>24</td>
    <td>上海浦東</td>
  </tr>
  <tr>
    <td>3</td>
    <td>朝氣</td>
    <td>24</td>
    <td>廣州深圳</td>
  </tr>
</table>
<script language="javascript" >
var obj;
var xx=0,yy=0;
var tagobj;
var dragobj;
function draginit(){
 var tblRows = document.getElementsByTagName("TR");                //獲取所有的表格行
 for(var i=0;i<tblRows.length;i++){                                //遍歷每一行
  if((tblRows[i].parentNode.parentNode.id).toString().indexOf("drag")!=-1){
   tblRows[i].onmousedown=mousedown;         //綁定所有的鼠標(biāo)事件
   tblRows[i].ondragover=dragover;
   tblRows[i].ondragend=dragend;
   tblRows[i].ondrag=dragmove;
   tblRows[i].style.position="relative";
   tblRows[i].style.zIndex=1;
  }
 }
}
function mousedown(){                           //鼠標(biāo)按下時(shí)的處理
 obj = event.srcElement;
 if(obj.tagName=="TD") obj=obj.parentNode;           //如果是單元格
 if(obj.tagName!="TR") return false;                 //如果是單元行
 if(obj.rowIndex==0) return false;                   //如果是標(biāo)題
 yy=event.clientY;                                   //鼠標(biāo)的x坐標(biāo)和y坐標(biāo)
  xx=event.clientX;
 obj.style.zIndex=0;
 try{
  obj.dragDrop(); 
 }catch(e){
 }
}
function dragmove(){                //表格拖拽移動(dòng)時(shí)的位置獲取
 obj.style.top = event.clientY-yy;
  obj.style.left = event.clientX-xx;
}
function dragover(){                //鼠標(biāo)拖動(dòng)時(shí)的操作
 tagobj=event.srcElement;
 if(tagobj.tagName=="TD"){tagobj=tagobj.parentNode;}//如果是單元格
 if(tagobj.tagName!="TR")return false;              //如果是單元行
}
function dragend(){                                     //拖拽完畢后的處理-高度，寬度等
 obj.style.top=0;
 obj.style.left=0;
 obj.style.zIndex=1;
 if(tagobj!=null && tagobj.rowIndex!=0){
  var t1=dragTbl.rows[obj.rowIndex];
  var t2=dragTbl.rows[tagobj.rowIndex];
  dragTbl.getElementsByTagName('tbody')[0].insertBefore(obj,tagobj);//實(shí)現(xiàn)表格單元行的互換
  tagobj.style.zIndex=1;
 }
 tagobj=null;
}
draginit();                                 //初始化拖拽操作
</script>
</body>
</html>

【運(yùn)行效果】

拖動(dòng)表格行改變順序運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是為表格綁定的事件，其中每個(gè)事件都對(duì)應(yīng)一個(gè)自定義的方法。難點(diǎn)是根據(jù)鼠標(biāo)的坐標(biāo)改變表格行的位置。最終實(shí)現(xiàn)互換的原理是使用“iIlsercBefore”方法將兩個(gè)行的位置互換。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：利用JS實(shí)現(xiàn)拖動(dòng)表格行改變順序進(jìn)行本實(shí)例源碼下載

標(biāo)簽： JS實(shí)現(xiàn) 表格順序