本文转自博客园执着的笨蛋的博客，原文链接：js table操作 ------ 拖拽行为并且使其自动贴附，如需转载请自行联系原博主。
js table操作 ------ 拖拽行为并且使其自动贴附
代码1：
<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 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>
代码2：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.removableObj
{
height:25;position:relative;
}
</style>
<script language="javascript">
var beginMoving=false;
var sourceObj=null;
var objectObj=null;
var objectObj2=null;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
sourceObj=obj;
objectObj=null;
}
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;
window.setTimeout("swapFun()",20);
}
function MouseOverFun(obj)
{
if(obj==sourceObj) return false;
objectObj=obj;
}
function MouseOverFun2(obj)
{
objectObj2=obj;
}
function swapFun()
{
if(sourceObj!=null && objectObj!=null) objectObj.insertAdjacentElement("beforeBegin",sourceObj);
else if(sourceObj!=null && objectObj2!=null) objectObj2.insertAdjacentElement("beforeEnd",sourceObj);
sourceObj=null;
objectObj=null;
objectObj2=null;
}
</script>
</head>
<body>
<table border="1" width="100%" height="58">
<tr>
<td width="34%" valign="top" height="46" onmouseover="MouseOverFun2(this);" >
<table border="1" width="100%" bgcolor="#99CCFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<tr>
<td width="23%">和</td>
<td width="21%">飞过海</td>
</tr>
<tr>
<td width="23%"> </td>
<td width="21%"> </td>
</tr>
</table><table border="1" width="100%" bgcolor="#FFCCFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<tr>
<td width="21%">还是</td>
<td width="35%">护身符哈</td>
</tr>
<tr>
<td width="21%">，</td>
<td width="35%">和是是护</td>
</tr>
</table>
<table border="1" width="100%" bgcolor="#00CC99" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<tr>
<td width="21%">还是</td>
<td width="9%"> </td>
<td width="35%">呵呵</td>
</tr>
<tr>
<td width="21%">，</td>
<td width="9%"> </td>
<td width="35%">和</td>
</tr>
</table>
</td>
<td width="32%" valign="top" height="52" onmouseover="MouseOverFun2(this);" >
<table border="1" width="100%" bgcolor="#FF0000" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<tr>
<td width="21%">还是</td>
</tr>
<tr>
<td width="21%">，</td>
</tr>
</table>
<table border="1" width="100%" bgcolor="#00FFFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<tr>
<td width="21%">还是</td>
<td width="35%">护身符哈</td>
<td width="21%"> </td>
<td width="23%">呵呵</td>
</tr>
<tr>
<td width="21%">，</td>
<td width="35%">和是是护</td>
<td width="21%"> </td>
<td width="23%">和</td>
</tr>
</table>
</td>
<td width="34%" valign="top" height="52" onmouseover="MouseOverFun2(this);" >
<table border="1" width="100%" bgcolor="#FF9966" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<tr>
<td width="21%">还是</td>
<td width="35%">护身符哈</td>
<td width="21%"> </td>
<td width="23%">呵呵</td>
</tr>
<tr>
<td width="21%">，</td>
<td width="35%">和是是护</td>
<td width="21%"> </td>
<td width="23%">和</td>
</tr>
</table>
<table width="100%" border="1" bgcolor="#FFFFCC" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<tr>
<td width="87"> 输多发</td>
<td width="115">嘎撒递归</td>
</tr>
<tr>
<td width="87">嘎大嘎</td>
<td width="115">大幅度</td>
</tr>
<tr>
<td width="87">过大撒</td>
<td width="115">嘎</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>