做了个Table 的Row拖动，有兴趣的来看看

呵呵，做来玩玩，暂时是没有用处，不过我经常写的js都是处理Table,很可能某一天有这样的需求

解决方案 »

  1.   

    刚才看到楼主的代码后
    换一种思路也写了一个：<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</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;
    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;
    obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
    }</script>
    </head>
    <body >

    <TABLE WIDTH="300" BORDER="1" >

    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=blue>0</TD><TD>0</TD><TD>0</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=black>1</TD><TD>1</TD><TD>1</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=red>2</TD><TD>2</TD><TD>2</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>3</TD><TD>3</TD><TD>3</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>4</TD><TD>4</TD><TD>4</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>5</TD><TD>5</TD><TD>5</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>6</TD><TD>6</TD><TD>6</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>7</TD><TD>7</TD><TD>7</TD></TR> </script>
    </TABLE> </body>
    </html>
      

  2.   

    JK_10000(JK) 做得不错压，没有想到Row也可以用style的top和left，代码也简单很多
      

  3.   

    代码没有注释，稍嫌不足，苦了我这script新手了