设为首页收藏本站

职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
职业IT人-IT人生活圈»IT生活 › 软件工程师 › WEB前端 › 手动拖动table的行来进行的排序
返回列表 发新帖
查看: 1803|回复: 2

手动拖动table的行来进行的排序

[复制链接]
ling 发表于 2009-4-27 11:55 | 显示全部楼层 |阅读模式
<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 .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 .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>
回复

使用道具 举报

月上萧萧 发表于 2011-7-23 10:48 | 显示全部楼层
楼主福如东海，万寿无疆！
回复 支持 反对

使用道具 举报

江南枫 发表于 2011-8-1 10:38 | 显示全部楼层
帮你项项吧
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点，并不代表本站赞同其观点和对其真实性负责，本站只提供参考并不构成任何投资及应用建议。本站是信息平台，网站上部分文章为转载，并不用于任何商业目的，我们已经尽可能的对作者和来源进行了通告，但是能力有限或疏忽造成漏登，请及时联系我们，我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-4-26 05:56 , Processed in 0.129630 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表