JS实现表格行拖动
实现功能：
- 在Table上实现行的拖动。支持预览
- 忽略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> |
