JS實現表格行拖動

實現功能：

1. 在Table上實現行的拖動。支援預覽
2. 忽略THEAD/TFoot的行

支援的兩個函數

if(window.scrollTop==null) {     window.scrollTop=function()     {         return window.document.body.scrollTop || window.document.documentElement.scrollTop;     } } if(null==window.scrollLeft) {     window.scrollLeft=function()     {         return window.document.body.scrollLeft || window.document.documentElement.scrollLeft;     } }

主要功能函數

if(null==window.XTable) {     window.XTable={};     window.XTable.DragDrop={};     window.XTable.DragDrop.tempRow=null;     window.XTable.DragDrop.isProcessing=false;     window.XTable.DragDrop.bgColorInitRow=null;     window.XTable.DragDrop.bgColorOverRow=null;     window.XTable.DragDrop.rowOver=null;     window.XTable.DragDrop.divStyle="color:white;"+         "background-color:#6E7B8B;"+         "position:absolute;"+         "z-index:9000;"+         "border:solid 2px #68228B;"+         "width:300px;"+         "padding:2px;";     window.XTable.DragDrop.tdStyle="color:#98FB98;"+         "white-space:nowrap;"+         "border:solid 1px #6C7B8B;"+         "padding-left:5px;"+         "padding-right:3px;";     window.XTable.DragDrop.overColor="#708090";     window.XTable.DragDrop.maskColor="#CDBA96";     window.XTable.rowDragDropMouseDown=function(tr)     {         if(null==tr||tr.parentElement==null||tr.parentElement.tagName!="TBODY")         {             return;         }         window.XTable.DragDrop.bgColorInitRow=tr.style.backgroundColor;         tr.style.backgroundColor=window.XTable.DragDrop.maskColor;         if(null==window.XTable.DragDrop.tempRow)         {             window.XTable.DragDrop.tempRow=document.createElement("<div style='"+window.XTable.DragDrop.divStyle+"'>");             document.body.appendChild(window.XTable.DragDrop.tempRow);                         window.XTable.DragDrop.tempRow.appendChild(document.createTextNode("拖動到目標行的上面，本行將自動放在目標行前面"));         }             while(window.XTable.DragDrop.tempRow.children &&window.XTable.DragDrop.tempRow.children.length>1)         {             window.XTable.DragDrop.tempRow.removeChild(window.XTable.DragDrop.tempRow.children[1]);         }         window.XTable.DragDrop.tempRow.style.display="block";         window.XTable.DragDrop.tempRow.style.top=event.clientY+scrollTop();         window.XTable.DragDrop.tempRow.style.left=event.clientX+scrollLeft()+10;         $A(tr.children).each(function(td,idx)         {             var ntd=document.createElement("<span style='"+window.XTable.DragDrop.tdStyle+"'>");             ntd.appendChild(document.createTextNode(td.innerText));             window.XTable.DragDrop.tempRow.appendChild(ntd)         });         window.XTable.DragDrop.isProcessing=true;         tr.setCapture();     }     window.XTable.rowDragDropMouseMove=function(tr)     {         if(null!=window.XTable.DragDrop.rowOver)         {             window.XTable.DragDrop.rowOver.style.backgroundColor=window.XTable.DragDrop.bgColorOverRow;             window.XTable.DragDrop.rowOver=null;         }         if(false==window.XTable.DragDrop.isProcessing)         {             return false;         }         window.XTable.DragDrop.tempRow.style.top=event.clientY+scrollTop();         window.XTable.DragDrop.tempRow.style.left=event.clientX+scrollLeft()+10;         var target=document.elementFromPoint(event.x,event.y);         while( null != target && target.tagName!="TR" )         {             target = target.parentElement;         }         if(!target||null==target.parentElement||target.parentElement.tagName!="TBODY")         {             return;         }         window.XTable.DragDrop.bgColorOverRow=target.style.backgroundColor;         window.XTable.DragDrop.rowOver=target;         target.style.backgroundColor=window.XTable.DragDrop.overColor;     }     window.XTable.rowDragDropMouseUp=function(tr)     {         tr.releaseCapture();         tr.style.backgroundColor=window.XTable.DragDrop.bgColorInitRow;         if(null!=window.XTable.DragDrop.rowOver)         {             window.XTable.DragDrop.rowOver.style.backgroundColor=window.XTable.DragDrop.bgColorOverRow;             window.XTable.DragDrop.rowOver=null;         }         if(null!=window.XTable.DragDrop.tempRow)         {             window.XTable.DragDrop.tempRow.style.display="none";         }         if(!window.XTable.DragDrop.isProcessing)         {             return false;         }         window.XTable.DragDrop.isProcessing=false;         var target=document.elementFromPoint(event.x,event.y);         while( null != target && target.tagName!="TR" )         {             target = target.parentElement;         }         if(!target||null==target.parentElement||target.parentElement.tagName!="TBODY")         {             return;         }         target.insertAdjacentElement("BeforeBegin",tr);     }     window.XTable.makeDragDrop=function(tablename)     {         var table=$(tablename);         if(null==table)         {             return;         }         if(!table.tBodies||table.tBodies.length<1)         {             return;         }         $A(table.tBodies[0].rows).each(function(tr,n)         {             (function(tr)             {                 tr.onmousedown=function()                 {                     window.XTable.rowDragDropMouseDown(tr);                 }                 tr.onmousemove=function()                 {                     window.XTable.rowDragDropMouseMove(tr);                 }                 tr.onmouseup=function()                 {                     window.XTable.rowDragDropMouseUp(tr);                 }             }             )(tr);         });     } }

測試的指令碼如下

<div style="width:200px;float:left">AAA</div> <div style="">     <TABLE WIDTH="800" BORDER="1" ID="AAAAAA" >     <THead>          <TR><TD>Header0</TD><TD>Header1</TD><TD>Header2</TD></TR>     </THead>     <tbody>      <TR style="background-color:"><TD>ROW_0</TD><TD>ROW_0_CELL_1</TD><TD>ROW_0_CELL2_1</TD></TR>      <TR style="background-color:black;color:white"><TD>ROW_1</TD><TD>ROW_1_CELL_2</TD><TD>ROW_1_CELL2_2</TD></TR>      <TR style="background-color:white"><TD>ROW_2</TD><TD>ROW_2_CELL_3</TD><TD>ROW_2_CELL2_3</TD></TR>      <TR style="background-color:menu"><TD>ROW_3</TD><TD>ROW_3_CELL_4</TD><TD>ROW_3_CELL2_4</TD></TR>      <TR style="background-color:yellow"><TD>ROW_4</TD><TD>ROW_4_CELL_5</TD><TD>ROW_4_CELL2_5</TD></TR>      <TR style="background-color:green"><TD>ROW_5</TD><TD>ROW_5_CELL_6</TD><TD>ROW_5_CELL2_6</TD></TR>      <TR style="background-color:blue"><TD>ROW_6</TD><TD>ROW_6_CELL_7</TD><TD>ROW_6_CELL2_7</TD></TR>      <TR style="background-color:red"><TD>ROW_7</TD><TD>ROW_7_CELL_8</TD><TD>ROW_7_CELL2_8</TD></TR>     </tbody>     <TFOOT>          <TR><TD>Footer</TD><TD>Footer</TD><TD>Footer</TD></TR>     </TFOOT>     </TABLE> </div> <script type="text/javascript" defer>     window.XTable.makeDragDrop("AAAAAA"); </script>