用鼠标拖动表格进行排序

 1<script language="javascript">   
 2var beginMoving=false;   
 3function MouseDownToMove(obj){   
 4obj.style.zIndex=1;   
 5obj.mouseDownY=event.clientY;   
 6obj.mouseDownX=event.clientX;   
 7beginMoving=true;   
 8obj.setCapture();   
 9} 
10
11function MouseMoveToMove(obj){   
12if(!beginMoving) return false;   
13obj.style.top = (event.clientY-obj.mouseDownY);   
14obj.style.left = (event.clientX-obj.mouseDownX);   
15}   
16function MouseUpToMove(obj){   
17if(!beginMoving) return false;   
18obj.releaseCapture();   
19obj.style.top=0;   
20obj.style.left=0;   
21obj.style.zIndex=0;   
22beginMoving=false;   
23var tempTop=event.clientY-obj.mouseDownY;   
24var tempRowIndex=(tempTop-tempTop%25)/25;   
25if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;   
26else tempRowIndex=tempRowIndex+obj.rowIndex;   
27if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;   
28obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);   
29} 
30
31</script>

1<br/>

 1<table border="1" width="300">
 2<tr bgcolor="#ffffff" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" style="height:25;position:relative;"><td bgcolor="blue">0</td><td>0</td><td>0</td></tr>
 3<tr bgcolor="#ffffff" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" style="height:25;position:relative;"><td bgcolor="black">1</td><td>1</td><td>1</td></tr>
 4<tr bgcolor="#ffffff" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" style="height:25;position:relative;"><td bgcolor="red">2</td><td>2</td><td>2</td></tr>
 5<tr bgcolor="#ffffff" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" style="height:25;position:relative;"><td>3</td><td>3</td><td>3</td></tr>
 6<tr bgcolor="#ffffff" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" style="height:25;position:relative;"><td>4</td><td>4</td><td>4</td></tr>
 7<tr bgcolor="#ffffff" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" style="height:25;position:relative;"><td>5</td><td>5</td><td>5</td></tr>
 8<tr bgcolor="#ffffff" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" style="height:25;position:relative;"><td>6</td><td>6</td><td>6</td></tr>
 9<tr bgcolor="#ffffff" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" style="height:25;position:relative;"><td>7</td><td>7</td><td>7</td></tr>
10
11</table>