表格拖动排序 保存排序结果

楼上，我没接触过JQuery，你能给出实现代码嘛？

解决方案 »

  1.   

    你的取消是基于上次的排序结果还是就是从1--》8这样排？？
    <html> 
    <head> 
    <title>表格排序 </title> <script language="javascript"> 
    <!-- 
    function $(Id){return document.getElementById(Id);}
    var beginMoving = false; var tbid=new Array();//存储从cookie中获取的id集合的，如果取消是基于上次的则使用此集合来排序
    window.onload=function(){
      var str=document.cookie;
      var m=/tbId=([^;]+)/i.exec(str);
      if(m)tbid=eval(m[1]);//从cookie中获取原来保存的id集合
      else for(var i=0;i<8;i++)tbid[i]=i+1;//如果没有cookie则默认是1--》8排序
      
      cancel()//调用还原函数初始化上次保存的集合序列对象
    }
    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.setCapture (); 
        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)"; 
        
    if ( tempRowIndex == 0 ) //如果移动目标是表头,则返回,不移动 
    return false; 
    obj.parentElement.moveRow(obj.rowIndex, tempRowIndex); 
    } 
    function FunTest () 
    { 
      for (i = 1; i <= 8; i ++) 
      { 
          alert ("TrID"+i+":"+document.getElementById ("TrID" + (i)).rowIndex); 
      } 
    } 
    function setCookie() 
    { 
      var tr,tb=$('mytable');
      var len=tb.rows.length;
      var data="[";
      for(var i=1;i<len;i++)data+=tb.rows[i].id.substring(4)+",";
      data=data.substring(0,data.length-1);
      data+="]";
      var d=new Date();
      d.setMonth(d.getMonth()+1);//有效期1个月
      document.cookie="tbId="+data+";expires="+d.toGMTString();
      alert('保存成功');
    } function checkCookie() 
    { 
    } 
    //这里的取消是基于上次排序的
    function cancel() 
    { 
      
      var tr,tbody=$('mytable').firstChild;
      for(var i=0;i<tbid.length;i++){
        tr=$("TrID"+tbid[i]);
        tr=tbody.removeChild(tr);
        tbody.appendChild(tr);
      }
    } 
    //-->
    </script> 
    </head> 
    <body> 
    <center>用鼠标移动TR </center> <br> 
    <center> 
    <table class="sortable" id="mytable" width="300" border="1" cellpadding="0" cellspacing="0" > 
    <tr style='height:25;position:static;'> 
      <th scope="col">name </th> 
      <th scope="col">age </th> 
      <th scope="col">sex </th> 
    </tr> 
    <tr id="TrID1" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'> 
      <td bgcolor="#ffffff">1 </td> 
      <td bgcolor="#ffffff">1 </td> 
      <td bgcolor="#ffffff">1 </td>  
    </tr> 
    <tr id="TrID2" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'> 
      <td bgcolor="#ffffff">2 </td> 
      <td bgcolor="#ffffff">2 </td> 
      <td bgcolor="#ffffff">2 </td> 
    </tr> 
    <tr id="TrID3" 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="TrID4" 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="TrID5" 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="TrID6" 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="TrID7" 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> 
    <tr id="TrID8" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'> 
      <td bgcolor="#ffffff">8 </td> 
      <td bgcolor="#ffffff">8 </td> 
      <td bgcolor="#ffffff">8 </td> 
    </tr> 
    </table> 
    <table width="300" border="1" cellpadding="0" cellspacing="0"> 
    <tr> 
      <td colspan="3" align="center"> 
        <input type="button" name="BtnTest1" value=" 测试 " onClick="FunTest()"> 
      </td> 
      <td colspan="3" align="center"> 
        <input type="button" name="BtnTest2" value=" 保存 " onClick='setCookie()'> 
      </td> 
      <td colspan="3" align="center"> 
        <input type="button" name="BtnTest3" value=" 排序 " onClick='checkCookie()'> 
      </td> 
      <td colspan="3" align="center"> 
        <input type="reset" name="BtnTest4" value=" 取消 " onClick='cancel()'> 
      </td> 
    </tr> 
    </table> 
    </center> 
    </body> 
    </html>