♀表格行之间的拖拽，请高手指教！♂解决方法

♀表格行之间的拖拽，请高手指教！♂
本人模仿JK的表格行之间的拖拽代码，写了一个自己的表格行之间的拖拽，只是将拖拽事件放到了表格行的一个单元格中，结果就不能运行了，不知道为什么，请高手指教！

我修改的：
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>
<script language= "javascript ">
var beginMoving=false;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
}

function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
else tempRowIndex=tempRowIndex+obj.rowIndex;
if(tempRowIndex > = obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
}

</script>
</head>
<body >

<TABLE id= "tbl " WIDTH= "300 " BORDER= "1 " >

<TR bgcolor=#ffffff style= 'height:25;position:relative; ' > <td bgcolor= "gray " width= "20px " onmousedown= 'MouseDownToMove(this.parentElement) ' onmousemove= 'MouseMoveToMove(this.parentElement) ' onmouseup= 'MouseUpToMove(this.parentElement); '> </td> <TD> 0 </TD> <TD> 0 </TD> <TD> 0 </TD> </TR>

</TABLE>
</body>
</html>

原版的：
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>
<script language= "javascript ">
var beginMoving=false;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
}

function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
else tempRowIndex=tempRowIndex+obj.rowIndex;
if(tempRowIndex > = obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
}
</script>
</head>
<body >

<TABLE id= "tbl " WIDTH= "300 " BORDER= "1 " >

<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD bgcolor=blue> 0 </TD> <TD> 0 </TD> <TD> 0 </TD> </TR>

<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD bgcolor=black> 1 </TD> <TD> 1 </TD> <TD> 1 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD bgcolor=red> 2 </TD> <TD> 2 </TD> <TD> 2 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 3 </TD> <TD> 3 </TD> <TD> 3 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 4 </TD> <TD> 4 </TD> <TD> 4 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 5 </TD> <TD> 5 </TD> <TD> 5 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 6 </TD> <TD> 6 </TD> <TD> 6 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 7 </TD> <TD> 7 </TD> <TD> 7 </TD> </TR>
</TABLE>
</body>
</html>

[解决办法]
改了一下
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>

<script language= "javascript ">
var beginMoving=false;
var dragobj = null;

function MouseDownToMove(obj){
dragobj = obj;
dragobj.style.zIndex=1;
dragobj.mouseDownY=event.clientY;
dragobj.mouseDownX=event.clientX;
beginMoving=true;

dragobj.setCapture();
}

document.onmousemove = function(e){
if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }
if(beginMoving){
dragobj.style.top = (event.clientY-dragobj.mouseDownY);
dragobj.style.left = (event.clientX-dragobj.mouseDownX);

}

}

document.onmouseup = function(){
beginMoving=false;//拖拽变量设为false
if(document.all && dragobj != null){
dragobj.releaseCapture();
dragobj.style.top=0;
dragobj.style.left=0;
dragobj.style.zIndex=0;
var tempTop=event.clientY-dragobj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+dragobj.rowIndex <0 )tempRowIndex=-1;
else tempRowIndex=tempRowIndex+dragobj.rowIndex;
if(tempRowIndex> =dragobj.parentElement.rows.length-1) tempRowIndex = dragobj.parentElement.rows.length-1;
dragobj.parentElement.moveRow(dragobj.rowIndex,tempRowIndex);

dragobj = null;
}
}

</script>

</head>
<body>
<table id= "tbl " width= "300 " border= "1 ">
<tr bgcolor= "#ffffff " style= 'height: 25; position: relative; '>
<td bgcolor= "gray " width= "20px " onmousedown= 'MouseDownToMove(this.parentElement) '
>
</td>
<td>
0 </td>
<td>
0 </td>
<td>
0 </td>
</tr>
<tr bgcolor= "#ffffff " style= 'height: 25; position: relative; '>
<td bgcolor= "gray " width= "20px " onmousedown= 'MouseDownToMove(this.parentElement) '
>
</td>
<td>
1 </td>
<td>
1 </td>
<td>
1 </td>
</tr>
<tr bgcolor= "#ffffff " style= 'height: 25; position: relative; '>
<td bgcolor= "gray " width= "20px " onmousedown= 'MouseDownToMove(this.parentElement) '
>
</td>
<td>
2 </td>
<td>
2 </td>
<td>
2 </td>
</tr>
<tr bgcolor= "#ffffff " style= 'height: 25; position: relative; '>
<td bgcolor= "gray " width= "20px " onmousedown= 'MouseDownToMove(this.parentElement) '
>
</td>
<td>
3 </td>
<td>
3 </td>
<td>
3 </td>
</tr>
<tr bgcolor= "#ffffff " style= 'height: 25; position: relative; '>
<td bgcolor= "gray " width= "20px " onmousedown= 'MouseDownToMove(this.parentElement) '
>
</td>
<td>
4 </td>

<td>
4 </td>
<td>
4 </td>
</tr>
<tr bgcolor= "#ffffff " style= 'height: 25; position: relative; '>
<td bgcolor= "gray " width= "20px " onmousedown= 'MouseDownToMove(this.parentElement) '
>
</td>
<td>
5 </td>
<td>
5 </td>
<td>
5 </td>
</tr>
<tr bgcolor= "#ffffff " style= 'height: 25; position: relative; '>
<td bgcolor= "gray " width= "20px " onmousedown= 'MouseDownToMove(this.parentElement) '
>
</td>
<td>
6 </td>
<td>
6 </td>
<td>
6 </td>
</tr>
<tr bgcolor= "#ffffff " style= 'height: 25; position: relative; '>
<td bgcolor= "gray " width= "20px " onmousedown= 'MouseDownToMove(this.parentElement) '
>
</td>
<td>
7 </td>
<td>
7 </td>
<td>
7 </td>
</tr>
</table>
</body>
</html>

[解决办法]
dragobj.parentElement.moveRow(dragobj.rowIndex,tempRowIndex);
这一句后面加一句：
dragobj.parentNode.parentNode.insertBefore(dragobj.parentNode,dragobj.parentNode.nextSibling);

[解决办法]
楼上的有好耐心啊O.o
[解决办法]
客户端Table在moveRow之后checkbox状态并不保存
所以只能自己在字符串中即时保存状态
这里实现第一列checkbox 其他的类推,不想写太多重复代码LZ自己补全拉

<HTML>
<HEAD>
<TITLE> JK:支持民族工业,尽量少买X货 </TITLE>
<META http-equiv=Content-Type content= "text/html; charset=utf-8 ">
<SCRIPT language=javascript>
var beginMoving=false;
var obj = null;

var checkDisplay_state = " ";//记录该列checkbox状态－ "0|true|1|true|2|true|3|true "

function window.onload()
{
Init();
}

function Init()
{
//初始化状态字符串
var display = document.getElementsByName( "checkDisplay ");
for(var i=0;i <display.length;i++)
{
checkDisplay_state = checkDisplay_state.concat(display[i].parentElement.parentElement.firstChild.innerHTML+ "| "+display[i].checked+ "| ");
}
checkDisplay_state = checkDisplay_state.substring(0,checkDisplay_state.length-1);
}

function setState(obj)
{
var rep_str= " ";
var res_str= " ";

if(obj.checked == true)
{
rep_str = obj.parentElement.parentElement.firstChild.innerHTML + "| "+ "false ";
res_str = obj.parentElement.parentElement.firstChild.innerHTML + "| "+ "true ";
}
else
{
rep_str = obj.parentElement.parentElement.firstChild.innerHTML + "| "+ "true ";

res_str = obj.parentElement.parentElement.firstChild.innerHTML + "| "+ "false ";
}

if(obj.name== "checkDisplay ")
{
checkDisplay_state = checkDisplay_state.replace (rep_str,res_str);
}

}

function BindCheckBox()
{
//根据状态字符串设定checkbox
var i,j,ind;
var checkdisplay = checkDisplay_state.split( '| ');
var display = document.getElementsByName( "checkDisplay ");
for(i=0;i <checkdisplay.length;i+=2)
{
ind =i+1;
if(checkdisplay[ind]== "true ")
{
for(j=0;j <display.length;j++)
{
if(display[j].parentElement.parentElement.firstChild.innerHTML==checkdisplay[i])
{
display[j].checked = true;
}
}
}
else
{
for(j=0;j <display.length;j++)
{
if(display[j].parentElement.parentElement.firstChild.innerHTML==checkdisplay[i])
{
display[j].checked = false;
}
}
}
}
}

function MouseDownToMove(o){
obj = o;
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
}

document.onmousemove = function(e){
if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }
if(beginMoving){
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
}

document.onmouseup = function(){
beginMoving=false;//拖拽变量设为false
if(document.all && obj != null){
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=0;
else tempRowIndex=tempRowIndex+obj.rowIndex;
if(tempRowIndex> =obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
obj.parentNode.insertBefore(obj,obj.nextSibling);

obj = null;
BindCheckBox();
}
}

</SCRIPT>

<META content= "MSHTML 6.00.2900.3132 " name=GENERATOR> </HEAD>
<BODY>
<FORM id=form1 name=form1>
<DIV>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<TABLE id=HeaderTable cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR bgcolor= "gray ">
<TD align=center width=40> 序号 </TD>
<TD align=center width=40> 显示 </TD>
<TD align=center width=200> 名称 </TD>
<TD align=center width=40> 分组 </TD>
<TD align=center width=40> 小计 </TD>
<TD align=center width=40> 合计 </TD> </TR> </TBODY> </TABLE> </TD>
</TR>
<TR>
<TD>
<TABLE id=ContentTable cellSpacing=0 cellPadding=0 border=1>
<TBODY>

♀表格行之间的拖拽请高手指教！♂解

热点推荐