JAVASCRIPT+DHTML实现表格拖动
自已做的,本来想在网上找前辈们做的,可是总找不到这种例子,要么找出来的太复杂,
要么就没法用,索性自己写了一个.看看还可以用!贡献出来,估计和我一样的菜鸟用的着!
<html> <style> body{ font-size:9pt; } table,th,td{ font-size:9pt; } .lsitTalbe{ table-layout:fixed; width:30%; border-collapse:collapse; border-color:#507010; color:#003300; } .pageda{ font-family:Webdings; font-size:12pt; color:#CCCCCC; cursor:default; } .pageua{ font-family:Webdings; font-size:12pt; } .even{ background:#e8f8d0; } .odd{ background:#f8fcf0; } .header{ background:a0dc40; color:003300; } </style> <head> <TITLE>JAVASCRIPT+DHTML实现表格拖动DEMO</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="Hunk Dong"> </head> <body> <br> JAVASCRIPT+DHTML实现表格拖动 按住 <b>列1</b> 即可拖动 <hr width="30%" align="left"> <table class="lsitTalbe" border="1" cellspacing="1" cellpadding="1" onmousedown="mousedown()" onmouseup="mouseup()" onmousemove="mousemove()" > <tr class="header"> <th width="10%">列1</th> <th width="10%">列2</th> <th width="40%">列3</th> <th width="40%">列4</th> <tr> <tr class="even" id="tr_1"> <TD style="cursor:move" title="按住可拖动">1</TD> <TD ><INPUT class=inputStyle id=chkTaskItem_3 type=checkbox value=3 name=chkTaskItem></TD> <TD ><INPUT class=inputStyle id=txtTaskName_3 type=txtTaskName size=25 name=txtTaskName value="test1"></TD> <TD >test1</TD> </tr> <tr class="odd" id="tr_2"> <TD style="cursor:move" title="按住可拖动">2</TD> <TD ><INPUT class=inputStyle id=chkTaskItem4 type=checkbox value=4 name=chkTaskItem></TD> <TD ><INPUT class=inputStyle id=txtTaskName_4 type=txtTaskName size=25 name=txtTaskName value="test2"></TD> <TD >test2</TD> </tr> <tr class="even" id="tr_3"> <TD style="cursor:move" title="按住可拖动">3</TD> <TD ><INPUT class=inputStyle id=chkTaskItem_5 type=checkbox value=5 name=chkTaskItem></TD> <TD ><INPUT class=inputStyle id=txtTaskName_5 type=txtTaskName size=25 name=txtTaskName value="test3"></TD> <TD >test3</TD> </tr> </table> </body> </html> <script language="javaScript"> var srcRowIndex; var targetRowIndex; var bDragMode ; var objDragItem ; var el; function window.onload(){ initAdditionalElements(); } function initAdditionalElements(){ objDragItem = document.createElement("DIV"); with(objDragItem.style){ backgroundColor = "buttonshadow"; cursor = "default"; position = "absolute"; filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)"; zIndex = 3001; display ="none"; } window.document.body.insertAdjacentElement("afterBegin", objDragItem); } function mousedown(){ el = window.event.srcElement; if(el==null||el.tagName!="TD") return false; if(el.cellIndex!=0 || el.parentNode.rowIndex<2) return false; srcRowIndex = el.parentElement; bDragMode = true ; if (objDragItem!=null){ with(objDragItem){ innerHTML = el.parentElement.innerHTML; style.height = el.parentElement.offsetHeight; style.width = el.parentElement.offsetWidth; } } el.setCapture(); } function mouseup(){ if(el==null || el.cellIndex!=0 || el.parentNode.rowIndex<2) return false; targetRowIndex = el.parentElement; srcRowIndex.swapNode(targetRowIndex); bDragMode = false ; objDragItem.style.display ="none"; } function mousemove(){ el = window.event.srcElement; window.event.cancelBubble = false; cliX = window.event.clientX; cliY = window.event.clientY; if(bDragMode && objDragItem!=null){ with(objDragItem){ style.display =""; style.posLeft = cliX +1; style.posTop = cliY - offsetHeight/2; } } } </script>
直接Copy下来就可以用,欢迎大家一起讨论
