如果在C/S结构的应用上进行鼠标拖动是一件比较容易的事，但是如果在WEB页面上进行鼠标拖动则比较麻烦，当然也很少有这种操作。
不过遇见的客户多了，什么要求都有，正所谓“林子大了，什么鸟都有”，呵呵，没有贬低客户的意思啊。我就遇过这样的客户，要求在WEB页面的表格上用鼠标拖动表格的行进行数据排序。
经过研究，找到了解决办法，好东西不敢独享，下面把解决方法写出来，与大家共享。此程序的源码可以到我的网站上下载。
作者：崔占民
EMAIL:CUIZM@163.COM
网址：http://www.j2soft.cn/
<html>
<head><title>表格排序</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;
for (i = 0; i < obj.cells.length; i ++) obj.cells [i].style.filter = "alpha(opacity = 70)"; 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;
for (i = 0; i < obj.cells.length; i ++) obj.cells [i].style.filter = "alpha(opacity = 100)"; obj.parentElement.moveRow(obj.rowIndex, tempRowIndex);}
function FunTest (){ for (i = 0; i < 8; i ++) { alert (document.getElementById ("TrID" + (i + 1)).rowIndex); }}//--></script></head>
<body bgcolor="cccccc">用鼠标移动TR<br> <table width="300" border="1" cellpadding="0" cellspacing="0"> <tr id="TrID1" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor=blue>0</td><td bgcolor="#ffffff">0</td><td bgcolor="#ffffff">0</td> </tr> <tr id="TrID2" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor=black>1</td><td bgcolor="#ffffff">1</td><td bgcolor="#ffffff">1</td> </tr> <tr id="TrID3" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor=red>2</td><td bgcolor="#ffffff">2</td><td bgcolor="#ffffff">2</td> </tr> <tr id="TrID4" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor="#ffffff">3</td><td bgcolor="#ffffff">3</td><td bgcolor="#ffffff">3</td> </tr> <tr id="TrID5" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor="#ffffff">4</td><td bgcolor="#ffffff">4</td><td bgcolor="#ffffff">4</td> </tr> <tr id="TrID6" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor="#ffffff">5</td><td bgcolor="#ffffff">5</td><td bgcolor="#ffffff">5</td> </tr> <tr id="TrID7" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor="#ffffff">6</td><td bgcolor="#ffffff">6</td><td bgcolor="#ffffff">6</td> </tr> <tr id="TrID8" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor="#ffffff">7</td><td bgcolor="#ffffff">7</td><td bgcolor="#ffffff">7</td> </tr> </table> <table width="300" border="1" cellpadding="0" cellspacing="0"> <tr> <td colspan="3" align="center"> <input type="button" name="BtnTest" value=" 测试 " οnclick="FunTest ()"> </td> </tr> <tr><td>aa</td></tr> </table></body></html>
