在jsp的web页面中如何实现记录显示顺序的上下调整？
在jsp、struts框架下，现在需要实现如下功能：多行记录的情况下，鼠标点中某行记录，上下拖动，放到一个合适的位置，来调整显示顺序。类似于媒体播放器调整mp3播放顺序的功能。高手指点啊？？
[解决办法]
网上找找噢，应该很多的，这个是我前几天看到的一个，内容多，你copy下来运行一下，然后删删吧。不过和你的要求不是很符合，这个是按钮上下移位的，不是拖动。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html>
<head>
<title> start </title>
<LINK rel= "stylesheet " href= "../../css/main.css " type= "text/css ">
</head>
<body MS_POSITIONING= "GridLayout ">
<FONT face= "宋体 "> </FONT> <FONT face= "宋体 "> </FONT> <FONT face= "宋体 "> </FONT>
<BR>
<table width= "200 " border= "0 " align= "center ">
<tr>
<td class= "Title " align= "center " nowrap>
菜单项排序
</td>
</tr>
</table>
<BR>
<form id= "Form1 " method= "post " action= "data.aspx ">
<table width= "60% " border= "0 " cellpadding= "5 " cellspacing= "0 " align= "center " class= "Workspace ">
<tr class= "line0 ">
<td width= "50% " align= "right ">
<select name= "seqItem " id= "seqItem " size= "5 ">
<option value= "1 " selected> 系统信息设置 </option>
<option value= "2 " > 基本信息设置 </option>
<option value= "4 " > AV </option>
<option value= "3 " > CTV </option>
<option value= "5 " > PCC </option>
</select>
</td>
<td width= "50% " align= "left "> <img src= "../../images/btn/top.jpg " border= "0 " alt= "移动最上面 " onClick= "doTopItem() " onMouseOver= "setCursor(this.style, 'hand ') "> <br> <br>
<img src= "../../images/btn/up.jpg " border= "0 " alt= "向上移动 " onClick= "doUpItem() " onMouseOver= "setCursor(this.style, 'hand ') "> <br> <br>
<img src= "../../images/btn/down.jpg " border= "0 " alt= "向下移动 " onClick= "doDownItem() " onMouseOver= "setCursor(this.style, 'hand ') "> <br> <br>
<img src= "../../images/btn/bottom.jpg " border= "0 " alt= "移动最下面 " onClick= "doBottomItem() " onMouseOver= "setCursor(this.style, 'hand ') "> </td>
</tr>
<tr>
<td colspan= "2 ">
<div align= "center "> <input type= "button " value= "保 存 " onClick= "doSubmit() "> <input type= "button " value= "重 置 " onClick= "doRe() "> <input type= "hidden " name= "items " value= " ">
</div>
</td>
</tr>
</table>
</form>
<SCRIPT LANGUAGE= "javascript ">
var seqSelect=document.forms[0].seqItem;
var length=5;
//go top
function doTopItem(){
var topV,topT;
var tempV=new Array();
var tempT=new Array();
for(var i=0;i <length;i++){
if(seqSelect.options[i].selected){
if(i==0)
return false;
topV=seqSelect.options[0].value;
topT=seqSelect.options[0].text;
seqSelect.options[0].value=seqSelect.options[i].value;
seqSelect.options[0].text=seqSelect.options[i].text;
for(var j=1;j <length;j++){
tempV[j]=seqSelect.options[j].value;
tempT[j]=seqSelect.options[j].text;
//alert(tempV+ " ··· "+tempT);
if(j==1){
seqSelect.options[1].value=topV;
seqSelect.options[1].text=topT;
}
else if(j> i){
break;
}
else{
seqSelect.options[j].value=tempV[j-1];
seqSelect.options[j].text=tempT[j-1];
}
}
}
}
seqSelect.options[0].selected=true;
}
//go bottom
function doBottomItem(){
var bottomV,bottomT;
var tempV=new Array();
var tempT=new Array();
for(var i=0;i <length;i++){
if(seqSelect.options[i].selected){
if(i==(length-1))
return false;
bottomV=seqSelect.options[length-1].value;
bottomT=seqSelect.options[length-1].text;
seqSelect.options[length-1].value=seqSelect.options[i].value;
seqSelect.options[length-1].text=seqSelect.options[i].text;
for(var j=length-2;j> =0;j--){
tempV[j]=seqSelect.options[j].value;
tempT[j]=seqSelect.options[j].text;
//alert(tempV+ " ··· "+tempT);
if(j==(length-2)){
seqSelect.options[length-2].value=bottomV;
seqSelect.options[length-2].text=bottomT;
}
else if(j <i){
break;
}
else{
seqSelect.options[j].value=tempV[j+1];
seqSelect.options[j].text=tempT[j+1];
}
}
}
}
seqSelect.options[length-1].selected=true;
}
//go up 1
function doUpItem(){
var tempV,tempT;
for(var i=0;i <length;i++){
if(seqSelect.options[i].selected){
if(i==0)
return false;
tempV=seqSelect.options[i-1].value;
tempT=seqSelect.options[i-1].text;
seqSelect.options[i-1].value=seqSelect.options[i].value;
seqSelect.options[i-1].text=seqSelect.options[i].text;
seqSelect.options[i].value=tempV;
seqSelect.options[i].text=tempT;
seqSelect.options[i-1].selected=true;
break;
}
}
}
//go down 1
function doDownItem(){
var tempV,tempT;
for(var i=0;i <length;i++){
if(seqSelect.options[i].selected){
if(i==(length-1))
return false;
tempV=seqSelect.options[i+1].value;
tempT=seqSelect.options[i+1].text;
seqSelect.options[i+1].value=seqSelect.options[i].value;
seqSelect.options[i+1].text=seqSelect.options[i].text;
seqSelect.options[i].value=tempV;
seqSelect.options[i].text=tempT;
seqSelect.options[i+1].selected=true;
break;
}
}
}
//get value
function doSubmit(){
var items= " ";
for(var i=0;i <length;i++){
if(i==0){
items=seqSelect.options[i].value;
}else{
items=items+ "|| "+seqSelect.options[i].value;
}
}
document.forms[0].items.value=items;
//alert(document.forms[0].items.value);
document.forms[0].action= "data.aspx ";
document.forms[0].submit();
}
function doRe(){
document.forms[0].action= " ";
document.forms[0].submit();
}
function setCursor(objStyle,cursor)
{
objStyle.cursor = cursor;
}
</SCRIPT>
</body>
</html>
