script-用鼠标拖动表格的行进行数据排序

<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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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=" 测试 " onclick="FunTest ()">

</td>

</tr>

<tr><td>aa</td></tr>

</table>

</body>

</html>

posted @ 2006-09-23 21:11 老冯阅读(304) 评论(0) 收藏举报

刷新页面返回顶部