js实现简单的table拖动功能
通过js实现简单的table拖动功能，目前拖动的cell设置为td层，可扩展。
?
附件中table.html是朋友传给我的，原作者不详，在此对他表示感谢，我这里应该叫扩展，标题有点大了，drag table demo.html是我修改之后的一个小例子，传上来主要是供本人学习借鉴。
本想查下jQuery的，好像没有找到单元格可以拖动的，看这个比较简单，就没有仔细研究jQuery的插件了，直接改这个了。
<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>Drag Table Demo</TITLE>
</head>
<body>
<table>
<tr>
<td>
? <table align="center"? border="1" cellspacing="1" cellpadding="1" onmousedown="mousedown()"?? onmouseup="mouseup()"?? onmousemove="mousemove()" >
??? <tr id="tr_1">?????
??????? <TD style="cursor:move" title="按住可拖动">1</TD>
??????? <TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=chkTaskItem_3 type=checkbox value=3 name=chkTaskItem></TD>
??????? <TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=txtTaskName_3 type=txtTaskName? size=10 name=txtTaskName value="test1"></TD>
??????? <TD style="cursor:move" title="按住可拖动">test1</TD>????
??? </tr>
???? <tr id="tr_2">?
??????? <TD style="cursor:move" title="按住可拖动">2</TD>
??????? <TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=chkTaskItem4 type=checkbox value=4 name=chkTaskItem></TD>
??????? <TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=txtTaskName_4 type=txtTaskName? size=10 name=txtTaskName value="test2"></TD>
??????? <TD style="cursor:move" title="按住可拖动">test2</TD>??????
??? </tr>
???? <tr id="tr_3">
??????? <TD style="cursor:move" title="按住可拖动">3</TD>
???????? <TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=chkTaskItem_5 type=checkbox value=5 name=chkTaskItem></TD>
??????? <TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=txtTaskName_5 type=txtTaskName? size=10 name=txtTaskName value="test3"></TD>
??????? <TD style="cursor:move" title="按住可拖动">test3</TD>??
??? </tr>???
? </table>
<td>
</tr>
</table>
</body>
</html>
<script language="javaScript">
????//源对象
??? var srcRowIndex;
?? //目标对象
??? var targetRowIndex;
??? var bDragMode ;
??//Drag对象
??? 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";?????????
??????? }
??????//再次承认js很强大，本人好自卑啊，总是要查文档，将刚创建的objDragItem对象加到body后
??????? window.document.body.insertAdjacentElement("afterBegin", objDragItem);
??? }????
??? function mousedown(){????
??????? el = window.event.srcElement;
??????? if(el==null||el.tagName!="TD") return false;?????
??????? //alert(el.innerHTML);
??????? if( el.parentNode.rowIndex<2) return false;
??????
?????? //srcRowIndex =? el.parentElement;??????
????????????? srcRowIndex =? el;?
??????? bDragMode = true ;???????
??????? if (objDragItem!=null){
??????????? with(objDragItem){
????????????????????
??????????????? innerHTML = el.innerHTML;
??????????????? style.height = el.offsetHeight;
??????????????? style.width? = el.offsetWidth;
??????????? }
??????? }
??????? el.setCapture();
??? }
??? function mouseup(){??
??????? if(el==null? ||el.tagName !="TD" || el.parentNode.rowIndex<2) {
?????????? alert("不能拖动到非TD元素");
??????? objDragItem.style.display? ="none";
??????? bDragMode = false ;
??????? return false;??????
??????? }
?????????
??????? if(srcRowIndex == el) {
???????? alert("不能拖动到自身");
??????? objDragItem.style.display? ="none";
??????? bDragMode = false ;
??????? return false;
????????}
??????? //targetRowIndex = el.parentElement;
???????????????? targetRowIndex = el;
??????
??????? srcRowIndex.swapNode(targetRowIndex);
??????? bDragMode = false ;
??????? objDragItem.style.display? ="none";????
??? }
?? function mousemove(){
??????? el = window.event.srcElement;
???????? if(el==null||el.tagName!="TD") return false;?????
??????????? //alert(el.tagName);
???????????? //取消事件冒泡
??????? window.event.cancelBubble = false;
? //left
??????? cliX = window.event.clientX;
? //top
??????? cliY = window.event.clientY;
????
??????? if(bDragMode && objDragItem!=null){
??????????? with(objDragItem){
??????????????? style.display? ="";
??????????????? style.posLeft = cliX +1;
??????????????? style.posTop? = cliY - offsetHeight/2;
??????????? }??
??????? }
??? }
</script>
?