當前位置:軟件學堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > 利用JS實現(xiàn)拖動表格行改變順序

利用JS實現(xiàn)拖動表格行改變順序

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

移動端

【實例名稱】

利用JS實現(xiàn)拖動表格行改變順序

【實例描述】

表格的行可以通過后臺命令實現(xiàn)互換,也可以讓用戶自己使用拖曳的方式完成互換操作。本例學習一個簡單的拖曳表格行操作。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>拖拽表格的行-學無憂(m.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">序號</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;         //綁定所有的鼠標事件    tblRows[i].ondragover=dragover;    tblRows[i].ondragend=dragend;    tblRows[i].ondrag=dragmove;    tblRows[i].style.position="relative";    tblRows[i].style.zIndex=1;   }  } } function mousedown(){                           //鼠標按下時的處理  obj = event.srcElement;  if(obj.tagName=="TD") obj=obj.parentNode;           //如果是單元格  if(obj.tagName!="TR") return false;                 //如果是單元行  if(obj.rowIndex==0) return false;                   //如果是標題  yy=event.clientY;                                   //鼠標的x坐標和y坐標   xx=event.clientX;  obj.style.zIndex=0;  try{   obj.dragDrop();   }catch(e){  } } function dragmove(){                //表格拖拽移動時的位置獲取  obj.style.top = event.clientY-yy;   obj.style.left = event.clientX-xx; } function dragover(){                //鼠標拖動時的操作  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);//實現(xiàn)表格單元行的互換   tagobj.style.zIndex=1;  }

 tagobj=null; } draginit();                                 //初始化拖拽操作 </script> </body> </html>

 

【運行效果】

 拖動表格行改變順序運行效果

【難點剖析】

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

【源碼下載】

為了JS代碼的準確性,請點擊:利用JS實現(xiàn)拖動表格行改變順序 進行本實例源碼下載 

標簽: JS實現(xiàn)  表格  順序