javascript拖拽表格并按顺序提交

[herrapfel]

拖拽已经实现了,但现在对拖拽后的表格的内容按顺序提交到服务器上不会做
请问应该怎样按照拖动后表格的顺序提交表单里的数据呢,急,谢谢了
JS代码如下:
<style>
.dragTable{

border-top:1px solid #3366cc;

margin-bottom: 10px;

width:100%;

background-color:#FFFFFF;

}

td{vertical-align:top; }

.dragTR{

cursor:move;

color:#7787cc;
text-decoration:underline;

background-color:#e5eef9;
padding:10px 0 10px 5px;

font-weight:bold;

}

#parentTable{

border-collapse:collapse;

letter-spacing:25px;

}

</style>


<script defer language="jscript">

var Drag={dragged:false,

ao:null,

tdiv:null,

dragStart:function(){

Drag.ao=event.srcElement;

if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){

Drag.ao=Drag.ao.offsetParent;

Drag.ao.style.zIndex=100;

}else

return;

Drag.dragged=true;

Drag.tdiv=document.createElement("div");

Drag.tdiv.innerHTML=Drag.ao.outerHTML;

Drag.ao.style.border="1px dashed red";

Drag.tdiv.style.display="block";

Drag.tdiv.style.position="absolute";

Drag.tdiv.style.filter="alpha(opacity=70)";

Drag.tdiv.style.cursor="move";

Drag.tdiv.style.border="1px solid #000000";

Drag.tdiv.style.width=Drag.ao.offsetWidth;

Drag.tdiv.style.height=Drag.ao.offsetHeight;

Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;

Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;

document.body.appendChild(Drag.tdiv);

Drag.lastX=event.clientX;

Drag.lastY=event.clientY;

Drag.lastLeft=Drag.tdiv.style.left;

Drag.lastTop=Drag.tdiv.style.top;

},

draging:function(){//重要:判断MOUSE的位置

if(!Drag.dragged||Drag.ao==null)return;

var tX=event.clientX;

var tY=event.clientY;

Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;

Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;

for(var i=0;i<parentTable.cells.length;i++){

var parentCell=Drag.getInfo(parentTable.cells[i]);

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){

var subTables=parentTable.cells[i].getElementsByTagName("table");

if(subTables.length==0){

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){

parentTable.cells[i].appendChild(Drag.ao);

}

break;

}

for(var j=0;j<subTables.length;j++){

var subTable=Drag.getInfo(subTables[j]);

if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){

parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);

break;

}else{

parentTable.cells[i].appendChild(Drag.ao);

}

}

}

}

}

,

dragEnd:function(){

if(!Drag.dragged)return;

Drag.dragged=false;

Drag.mm=Drag.repos(150,15);

Drag.ao.style.borderWidth="0px";

Drag.ao.style.borderTop="1px solid #3366cc";

Drag.tdiv.style.borderWidth="0px";

Drag.ao.style.zIndex=1;

},

getInfo:function(o){//取得坐标

var to=new Object();

to.left=to.right=to.top=to.bottom=0;

var twidth=o.offsetWidth;

var theight=o.offsetHeight;

while(o!=document.body){

to.left+=o.offsetLeft;

to.top+=o.offsetTop;

o=o.offsetParent;

}

to.right=to.left+twidth;

to.bottom=to.top+theight;

return to;

},

repos:function(aa,ab){

var f=Drag.tdiv.filters.alpha.opacity;

var tl=parseInt(Drag.getInfo(Drag.tdiv).left);

var tt=parseInt(Drag.getInfo(Drag.tdiv).top);

var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;

var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;

var kf=f/ab;

return setInterval(function(){if(ab<1){

clearInterval(Drag.mm);

Drag.tdiv.removeNode(true);

Drag.ao=null;

return;

}

ab--;

tl-=kl;

tt-=kt;

f-=kf;

Drag.tdiv.style.left=parseInt(tl)+"px";

Drag.tdiv.style.top=parseInt(tt)+"px";

Drag.tdiv.filters.alpha.opacity=f;

}

,aa/ab)

},

inint:function(){//初始化

for(var i=0;i<parentTable.cells.length;i++){

var subTables=parentTable.cells[i].getElementsByTagName("table");

for(var j=0;j<subTables.length;j++){

if(subTables[j].className!="dragTable")break;

subTables[j].rows[0].className="dragTR";

subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);

}

}

document.onmousemove=Drag.draging;

document.onmouseup=Drag.dragEnd;

}

//end of Object Drag

}

Drag.inint();

function _show(str){

var w=window.open('','');

var d=w.document;

d.open();

str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");

str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");

str=str.replace(/\r/g,"<br />\n");

d.write(str);

}
</script>

[herrapfel]

HTML代码如下:

<body leftMargin="30" topMargin="40" marginheight="0" marginwidth="0" bgcolor="#f2f8ff" text="#000000" >
<%

String type = ""; //属于某类专辑,歌手....
String columnname = "";
String id ="";
int size = 0;
String key = "";
StringBuffer strBuff = new StringBuffer();
String query = "";
if(request.getParameter("columnname")!= null)
columnname = request.getParameter("columnname").toString();


if(request.getParameter("id")!=null)
id = request.getParameter("id").toString();

if(request.getParameter("key")!= null)
key = request.getParameter("key").toString();

if(request.getParameter("type")!= null)
type = request.getParameter("type").toString();



if("1".equals(type)) {
strBuff.append("SELECT a.id,a.name,a.singertype FROM T_SINGER a,T_RELATION b where a.id=b.relationid and b.relationtypeid = 10 and b.srcid= ");
strBuff.append(id);
if (!"".equals(key)) {
strBuff.append(" and a.name like '%").append(Translate.TransGbToIso(key)).append("%' ");
}

}
else if("2".equals(type)) {
strBuff.append("SELECT a.id,a.subject,a.wind,a.local,a.lang FROM T_SONG a,T_RELATION b where a.id=b.relationid and b.relationtypeid = 10 and b.srcid= ");
strBuff.append(id);
if (!"".equals(key)) {
strBuff.append(" and a.subject like '%").append(Translate.TransGbToIso(key)).append("%' ");
}
}
else if("3".equals(type)) {
strBuff.append("SELECT a.id,a.subject,a.wind,a.local,a.lang FROM T_SPECIAL a,T_RELATION b where a.id=b.relationid and b.relationtypeid = 10 and b.srcid= ");
strBuff.append(id);
if (!"".equals(key)) {
strBuff.append(" and a.subject like '%").append(Translate.TransGbToIso(key)).append("%' ");
}
}
else if("4".equals(type)) {
strBuff.append("SELECT a.id,a.name FROM T_DISC_COM a,T_RELATION b where a.id=b.relationid and b.relationtypeid = 10 and b.srcid= ");
strBuff.append(id);
if (!"".equals(key)) {
strBuff.append(" and a.name like '%").append(Translate.TransGbToIso(key)).append("%' ");
}
}
else if("5".equals(type)) {
strBuff.append("SELECT a.id,a.subject,a.contenttype FROM T_CONTENT a,T_RELATION b where a.id=b.relationid and b.relationtypeid = 10 and b.srcid= ");
strBuff.append(id);
if (!"".equals(key)) {
strBuff.append(" and a.subject like '%").append(Translate.TransGbToIso(key)).append("%' ");
}
}
query = strBuff.toString();
session.setAttribute("sqlStr",query);


List list = pq.myQuery(query, request);
String bar = pq.PageLegendUp(); //读取分页提示栏
if(list!=null&&list.size()>0){

%>
<form action='./editdetail.jsp' name='form1' method='post'>
<input type="hidden" name="columnname" value="<%=columnname%>" >
<input type="hidden" name="id" value="<%=id%>" >
<input type="hidden" name="type" value="<%=type%>" >
<input type="hidden" name="key" value="<%=key%>" >
<input type="hidden" name="offset" >
</form>
<form name="EditData" method="post" action="EditData">
<input type="hidden" name="columnname" value="<%=columnname%>" >
<input type="hidden" name="id" value="<%=id%>" >
<input type="hidden" name="type" value="<%=type%>" >
<table border="0" cellpadding="0" cellspacing="10" width="100%" id="parentTable">
<TR vAlign="middle">
<TD align="center" width="100%">
你输入的栏目名：<font size="2" color="red"><%=columnname%></font>
<br>
<BR>
</TD>
</TR>
<TR vAlign="middle">
<TD align="center">
<%
for(int i=0;i<list.size();i++) {
List rsList = (ArrayList)list.get(i);
if (size == 0 ) size = rsList.size();
Iterator it =rsList.iterator();
%>
<table border=0 class="dragTable" cellspacing="0">
<tr align="Center" valign="Middle" style="color:#330099;">
<% if (it.hasNext()) {
String entry =(String) it.next();

%>
<td width=15%><input type="checkbox" name="checkbox<%=i%>" value ="<%=entry%>" >  <%=entry%></td><td id="<%=entry%>"></td>
<% }
while (it.hasNext()) {
%>
<td width="20%">
<%String entry =(String) it.next();
out.println(entry);
%>
</td>
<% } %>
</tr></table>
<% } %>
</table><table>
<tr align="Center" valign="Middle" style="color:#330099;">
<td colspan =<%=size+1%>><%=bar%></td>
</tr>
</table></TD>
</TR>
</table>
<TABLE> <table>
<TR vAlign="middle">
<TD align="center" width="100%">
<br>
<BR>
           全部选中 <input type="checkbox" name="check_all" size="6" onclick="javascript:CheckNone()" >    <input type="button" style="BORDER-RIGHT: 1px ridge; BORDER-TOP: 1px ridge; FONT-SIZE: 10pt; BORDER-LEFT: 1px ridge; BORDER-BOTTOM: 1px ridge; FONT-FAMILY: 宋体; BACKGROUND-COLOR: #8ebae6" onclick="javascript:accessTrue()" value=" 删 除 " >
</TD>
</TR>

<TR vAlign="middle">
<TD align="center" width="100%">
<br>
<BR>
<input type="text" name="key" size="30" maxlength="30" Class="textbox" >     <input type="button" style="BORDER-RIGHT: 1px ridge; BORDER-TOP: 1px ridge; FONT-SIZE: 10pt; BORDER-LEFT: 1px ridge; BORDER-BOTTOM: 1px ridge; FONT-FAMILY: 宋体; BACKGROUND-COLOR: #8ebae6" onclick="javascript:doClick1()" value=" 查 找 " >
</TD>
</TR>

</TABLE>
<%}
else{ %>
<table cellspacing="0" cellpadding="4" bordercolor="#009999" border="1" style="border-color:#009999;border-width:1px;border-style:solid;font-size:Smaller;width:70%;border-collapse:collapse;">
<tr align="Center" style="background-color:#EBF5F1;">
<td>没有你要选择的记录</td>
</tr>
<TR vAlign="middle">
<TD align="center" width="100%">
<input type="button" style="BORDER-RIGHT: 1px ridge; BORDER-TOP: 1px ridge; FONT-SIZE: 10pt; BORDER-LEFT: 1px ridge; BORDER-BOTTOM: 1px ridge; FONT-FAMILY: 宋体; BACKGROUND-COLOR: #8ebae6" onclick="javascript:transfer()" value=" 返回上一页 " >
<br>
<BR>
</TD>
</TR>
<table>
<% } %>

</form>
</body>
</html>