求一js，网页中的元素可以添加和位置任意移动

   电业局的电费收费系统中有个打票功能，用户缴费，可以给用户打印一张发票，发票上主要显示的用户表的起码，止码，走数差，电量，电费，余额等信息，用户C/S系统可以实现发票的定制，只不过得事先做好，我想用web的B/S实现一个：发票的内容可以添加，删除，并且任意一个元素都可以拖动位置，最终保存，形成一个发票模板。
   那个高人能帮忙出出注意。

解决方案 »

  1.   

    网上有很多  拖动的例子啊！！至于保存当然要根据  每个用户 userID 保存 为数据
      

  2.   

    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <style type="text/css">*{font-size:14px}button{margin:3px} </style> 
    <script type="text/javascript"> var mytable=null; window.onload=function(){ 
    mytable=new CTable("tbl",10); 
    } Array.prototype.each=function(f){for(var i=0;i <this.length;i++) f(this[i],i,this)} function $A(arrayLike){ 
    for(var i=0,ret=[];i <arrayLike.length;i++) ret.push(arrayLike[i]); 
    return ret 
    } Function.prototype.bind = function() { 
      var __method = this, args = $A(arguments), object = args.shift(); 
      return function() { 
        return __method.apply(object, args.concat($A(arguments))); 
      } 
    } 
    function CTable(id,rows){ 
    this.tbl=typeof(id)=="string"?document.getElementById(id):id;  
    if (rows && /^\d+$/.test(rows)) this.addrows(rows) 
    } CTable.prototype={ 
    addrows:function(n){          //随机添加n个tr 
    new Array(n).each(this.add.bind(this)) 
    }, 
    add:function(){          //添加1个tr 
    var self=this; 
    var tr = self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1); 
    var chkbox=document.createElement("INPUT") 
    chkbox.type="checkbox" 
    chkbox.onclick=self.highlight.bind(self) 
    td1.appendChild(chkbox) 
    td1.setAttribute("width","35") 
    td2.innerHTML="A： <INPUT NAME=A /> <br />B： <INPUT NAME=B />"; 
    }, 
    del:function(){          //删除所选tr 
    var self=this 
    $A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)}) 
    }, 
    up:function(){              //上移所选tr 
    var self=this 
    var upOne=function(tr){          //上移1个tr 
    if (tr.rowIndex>0){ 
    self.swapTr(tr,self.tbl.rows[tr.rowIndex-1]) 
    self.getChkBox(tr).checked=true 
    } 
    } 
    var arr=$A(self.tbl.rows).reverse() 
    if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){ 
    for(var i=arr.length-1;i>=0;i--){ 
    if (self.getChkBox(arr[i]).checked){ 
    arr.pop()            
    }else{ 
    break 
    } 
    } 
    } 
    arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) upOne(tr)}); 
    }, 
    down:function(){ 
    var self=this 
    var downOne=function(tr){      
    if (tr.rowIndex <self.tbl.rows.length-1)  { 
    self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]); 
    self.getChkBox(tr).checked=true; 
    } 
    } 
    var arr=$A(self.tbl.rows) if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){ 
    for(var i=arr.length-1;i>=0;i--){ 
    if (self.getChkBox(arr[i]).checked){ 
    arr.pop() 
    }else{ 
    break 
    } 
    } 
    } 
    arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) downOne(tr)}); 
    }, 
    highlight:function(){              //设置tr的背景色 
    var self=this; 
    var evt=arguments[0] || window.event 
    var chkbox=evt.srcElement || evt.target 
    var tr=chkbox.parentNode.parentNode 
    chkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr) 
    }, 
    swapTr:function(tr1,tr2){            //交换tr1和tr2的位置 
    var target=(tr1.rowIndex <tr2.rowIndex)?tr2.nextSibling:tr2; 
    var tBody=tr1.parentNode 
    tBody.replaceChild(tr2,tr1); 
        tBody.insertBefore(tr1,target); 
    }, 
    getChkBox:function(tr){          //从tr得到 checkbox对象 
    return tr.cells[0].firstChild 
    }, 
    restoreBgColor:function(tr){          
    tr.style.backgroundColor="#ffffff"  
    }, 
    setBgColor:function(tr){ 
    tr.style.backgroundColor="#c0c0c0" 
    } 
    } function f(a,b){ 
    var sumRow=function(row){return Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)}; 
    return sumRow(a)>sumRow(b)?1:-1; 
    } </script> </head> 
    <body> <button  onClick="javascript:mytable.add()">添加一行 </button> 
    <button  onClick="javascript:mytable.del()">删除选定行 </button> 
    <button  onClick="javascript:mytable.up()">上移选定行 </button> 
    <button  onClick="javascript:mytable.down()">下移选定行 </button> 
    <table width=100%> 
    <tr> 
    <td valign="top"> <table border id="tbl" width="80%"> </table> </td> 
    </tr> 
    </table> 
    </body> 
    </html>