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

最新推荐文章于 2023-09-08 14:47:02 发布

原创最新推荐文章于 2023-09-08 14:47:02 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #border #javascript #table #button #input

在C/S结构应用上鼠标拖动较容易，而在WEB页面上则较麻烦。作者遇到客户要求在WEB页面表格上用鼠标拖动表格行进行数据排序，经研究找到解决办法，并给出了相关的JavaScript代码实现，还提供了测试按钮功能。

　　如果在C/S结构的应用上进行鼠标拖动是一件比较容易的事，但是如果在WEB页面上进行鼠标拖动则比较麻烦，当然也很少有这种操作。

　　不过遇见的客户多了，什么要求都有，正所谓“林子大了，什么鸟都有”，呵呵，没有贬低客户的意思啊。我就遇过这样的客户，要求在WEB页面的表格上用鼠标拖动表格的行进行数据排序。

　　经过研究，找到了解决办法，好东西不敢独享，下面把解决方法写出来，与大家共享。此程序的源码可以到我的网站上下载。

　　　　　　　　　　　　作者：崔占民

　　　　　　　　　　EMAIL:CUIZM@163.COM

　　　　　　　　　　网址：http://www.j2soft.cn/

<html>

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>