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

  如果在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;' 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>

阅读更多
上一篇不要因为工作不好而辞职
下一篇一定时间之后,页面自动跳转
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭