图片拖动的保存问题

我的表格式九宫格类似，里面的9个表格可以任意移动，但我在保存这些表格新的位置时，却不晓德如何去保存它
<html>
<style>
    body{       
        font-size:9pt;
    }   
    table,th,td{
        font-size:9pt;
    }
    .lsitTalbe{
        table-layout:fixed;
        width:100%;
        border-collapse:collapse; 
        border-color:#507010;
        color:#003300;
    }
    .pageda{
        font-family:Webdings;
        font-size:12pt;
        color:#CCCCCC;
        cursor:default;
    }
    .pageua{
        font-family:Webdings;
        font-size:12pt;
    }
    .even{
        background:#e8f8d0;
    }
    .odd{
        background:#f8fcf0;
    }
    .header{
        background:a0dc40;
        color:003300;
    }
 </style>
<head>
    <TITLE>Drag Table Demo</TITLE>
</head>
<body>
<table>
<tr>
<td>
  <table class="lsitTalbe"  border="1" cellspacing="1" cellpadding="1" onmousedown="mousedown()"   onmouseup="mouseup()"   onmousemove="mousemove()" >
    <tr class="header">
        <th width="30%">列1</th>
<th width="30%">列2</th>
<th width="30%">列3</th>
    <tr>
    <tr class="even" id="tr_1" align="center" width="260px;" height="300px;">    
    <TD style="cursor:move" title="按住可拖动"><img src="1.jpg" class=inputStyle
 id=txtTaskName_1   name=txtTaskName value=""></TD>
 <TD style="cursor:move" title="按住可拖动"><img src="2.jpg" class=inputStyle id=txtTaskName_10   name=txtTaskName value="" ></TD>
  <TD style="cursor:move" title="按住可拖动"><img src="3.gif" class=inputStyle id=txtTaskName_13   name=txtTaskName value="" ></TD>
</tr>
<tr class="even" id="tr_2" align="center" width="260px;" height="300px;">   
        <TD style="cursor:move" title="按住可拖动"><img src="4.jpg" class=inputStyle 
 id=txtTaskName_2   name=txtTaskName value=""></TD>
  <TD style="cursor:move" title="按住可拖动"><img src="5.jpg" class=inputStyle id=txtTaskName_11   name=txtTaskName value=""></TD>
   <TD style="cursor:move" title="按住可拖动"><img src="6.jpg" class=inputStyle id=txtTaskName_14   name=txtTaskName value=""></TD>
</tr>
<tr class="even" id="tr_3" align="center" width="260px;" height="300px;">
<TD style="cursor:move" title="按住可拖动"><img src="7.jpg" class=inputStyle 
 id=txtTaskName_3   name=txtTaskName value=""></TD> 
 <TD style="cursor:move" title="按住可拖动"><img src="8.jpg" class=inputStyle id=txtTaskName_12   name=txtTaskName value=""></TD>
<TD style="cursor:move" title="按住可拖动"><img src="9.jpg" class=inputStyle 
id=txtTaskName_15   name=txtTaskName value=""></TD>
    </tr>
  </table>
<td>
</tr>
 </table>
</body>
</html>
<script language="javaScript">
    
    var srcRowIndex;
    var targetRowIndex;
    var bDragMode ;
    var objDragItem ;
    var el; 
//窗体显示时加载
    function window.onload(){        initAdditionalElements();
    }    function initAdditionalElements(){
    //创建整个DIV层
        objDragItem = document.createElement("DIV");
        with(objDragItem.style){  
  //背景色
            backgroundColor = "buttonshadow";
            //鼠标式样
cursor = "default";
//绝对定位
            position = "absolute";
//滤镜
            filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)";
//叠层
            zIndex = 3001;
//层不会被显示
            display  ="none";         
        }
        //插入新对象(是已经存在的对象)
        window.document.body.insertAdjacentElement("afterBegin", objDragItem);
    }    
//鼠标按下
    function mousedown(){  
     //是取出触发事件的源对象
        el = window.event.srcElement;
//如果对象不为空或者对象不是“TD”
        if(el==null||el.tagName!="TD") return false; 
//对象标签父类节点属性返回该在表格的行集合中的位置
        if( el.parentNode.rowIndex<2) return false;     
srcRowIndex =  el; 
        
        bDragMode = true ;       
        if (objDragItem!=null){
            with(objDragItem){
               innerHTML = el.innerHTML;
                style.height = el.offsetHeight;
                style.width  = el.offsetWidth;
            }
        }
//该元素获取所有鼠标事件
        el.setCapture();
    }
//鼠标放开
    function mouseup(){   
        //如果对象不为空或者对象不是“TD”或者对象标签父类节点属性返回该在表格的行集合中的位置<2
        if(el==null  ||el.tagName !="TD" || el.parentNode.rowIndex<2) {
           alert("不能拖动到非TD元素");
        //创建层样式消失
         objDragItem.style.display  ="none"; 
//设置
         bDragMode = false ;
         return false;       
        }
         //如果层属性等于当前属性
        if(srcRowIndex == el) {
         alert("不能拖动到自身");
         objDragItem.style.display  ="none"; 
         bDragMode = false ;
         return false;
        }
//返回标签属性为当前
        targetRowIndex = el;
        //将节点交换顺序
        srcRowIndex.swapNode(targetRowIndex);
        bDragMode = false ;
        objDragItem.style.display  ="none";    
    }
    //鼠标移动
   function mousemove(){
        //是取出触发事件的源对象
        el = window.event.srcElement;
//如果对象不为空或者对象不是“TD”
         if(el==null||el.tagName!="TD") return false;   
 //禁止当前事件传递到上级元素
        window.event.cancelBubble = false;
    //当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
        cliX = window.event.clientX;
         //当事件被触发时鼠标指针向对于浏览器页面（或客户区）的垂直坐标。
        cliY = window.event.clientY;    
        //注入事件
        if(bDragMode && objDragItem!=null){
            with(objDragItem){
                style.display  ="";
                style.posLeft = cliX +1;
                style.posTop  = cliY - offsetHeight/2;
            }  
        }
    }
</script>