話不我說，代碼如下，
需要用到Jquery的如下JS：
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.sortable.js
jquery.js
Html代碼
<script src="${ctx}/scripts/jqueryUI/jquery.ui.core.js"></script>
<script src="${ctx}/scripts/jqueryUI/jquery.ui.widget.js"></script>
<script src="${ctx}/scripts/jqueryUI/jquery.ui.mouse.js"></script>
<script src="${ctx}/scripts/jqueryUI/jquery.ui.sortable.js"></script>
<script type="text/javascript">
<!–
$(document).ready(function(){
//設置查詢模塊的 欄目代碼選中
var v_lmdm = $("#wzxxfbgjpxForm #lmdmHidden").val();
if(v_lmdm != '' && v_lmdm!=undefined){
var t_select = $("#wzxxfbgjpxForm #lmdm")[0];
var t_length = t_select.options.length;
for(var i = 0 ;i < t_length ; i++){
if(t_select.options[i].value==v_lmdm){
t_select.options[i].selected = "selected";
}
}
}
//右表的行添加 自由拖動排序功能
$("#rightTable tbody").sortable({stop:function(event,ui){}});
$("#rightTable tbody").disableSelection();
//給左右表添加鼠標移入移出 顏色 變化功能
$("#rightTable tbody tr").live("mousemove ",function(){
$(this).css("background","#d1e5ff");
});
$("#rightTable tbody tr").live("mouseout ",function(){
$(this).css("background","");
});
$("#leftTable tbody tr").live("mousemove ",function(){
$(this).css("background","#d1e5ff");
});
$("#leftTable tbody tr").live("mouseout ",function(){
$(this).css("background","");
});
//日期默認顯示當前日期
var beginDate = $("#wzxxfbgjpxForm #fbsjBegin").val();
var endDate = $("#wzxxfbgjpxForm #fbsjEnd").val();
if(beginDate == '' || beginDate == 'null'){
$("#wzxxfbgjpxForm #fbsjBegin").val($("#wzxxfbgjpxForm #currentDate").val());
}
if(endDate == '' || endDate == 'null'){
$("#wzxxfbgjpxForm #fbsjEnd").val($("#wzxxfbgjpxForm #currentDate").val());
}
});
//從左表 到 右表
function leftToRight(temp,v_gjid){
//當點擊 左表 某行被選中時
if(temp.checked){
var t_bt = $("#"+v_gjid).next().attr("title");
var t_zz = $("#"+v_gjid).next().next().attr("title");
var v_tr = '<tr id="'+v_gjid+'" class="'+v_gjid+'"><td class="rightGjid" style="text-align: center;"><input type="checkbox" name="itemsRight" checked="checked" onclick="javascript:rightToLeft(\''+v_gjid+'\')"></td>'
+ '<td class="rightBt" title="'+t_bt+'">'+t_bt+'</td>'
+ '<td class="rightZz" style="text-align: center;" title="'+t_zz+'">'+t_zz+'</td>'
+ '<td class="rightSfxg" style="text-align: center;"><input type="checkbox" name="sfxg"></td>'
+ '<td class="rightSfrd" style="text-align: center;"><input type="checkbox" name="sfrd"></td>'
+ '</tr>';
//插入新行到右表
$("#rightTable tbody").append(v_tr);
}
//當點擊 左表 某行沒被選中時
else{
//刪除對應的右表行
$("#rightTable ."+v_gjid).empty();
$("#rightTable ."+v_gjid).remove();
}
}
// 從右表 到左表
function rightToLeft(v_id){
//取得 右表中點擊行的 標題，作者
var v_bt = $("#rightTable ."+v_id).children().eq(1).attr("title");
var v_zz = $("#rightTable ."+v_id).children().eq(2).attr("title");
$("#rightTable ."+v_id).empty();
$("#rightTable ."+v_id).remove();
var leftTr = $("#leftTable #"+v_id);
if(leftTr !='' && leftTr != 'undefined' && leftTr != 'null' && leftTr.size()>0){
$("#leftTable #"+v_id).children().removeAttr("checked");
}
else{//如果右表的行 在左表中沒有，則需要添加新行
var trNum = $("#leftTable tbody tr").size();
var no = trNum+1;
var trLeft = '<tr><td style="text-align: center;">'+no+'</td><td id="'+v_id+'" style="text-align: center;"><input type="checkbox" name="items" onclick="javascript:leftToRight(this,\''+v_id+'\');"></td>'
+'<td title="'+v_bt+'">'+v_bt+'</td>'
+'<td style="text-align:center;" title="'+v_zz+'">'+v_zz+'</td></tr>';
//插入新行到左表
$("#leftTable tbody").append(trLeft);
}
}
//保存右表已經 排好序的 稿件
function saveGjPx(){
//排好序的 稿件ID數組
var gjidArr = new Array();
$(".rightGjid").each(function(i){
gjidArr[i]=$(this).parent().attr("class");
});
var btArr = new Array();
$(".rightBt").each(function(i){
btArr[i]=$(this).text();
});
var zzArr = new Array();
$(".rightZz").each(function(i){
zzArr[i]=$(this).text();
});
var sfxgArr = new Array();
$(".rightSfxg").each(function(i){
if($(this).children().attr("checked") == "checked"){
sfxgArr[i]="checked";
}else{
sfxgArr[i]="false";
}
});
var sfrdArr = new Array();
$(".rightSfrd").each(function(i){
if($(this).children().attr("checked")=="checked"){
sfrdArr[i]= "checked";
}else{
sfrdArr[i]="false";
}
});
var parameters = new Object();
parameters["gjidArr"]=gjidArr.toString();
parameters["zzArr"]=zzArr.toString();
parameters["btArr"]=btArr.toString();
parameters["sfxgArr"]=sfxgArr.toString();
parameters["sfrdArr"]=sfrdArr.toString();
parameters["lmdm"] = $("#wzxxfbgjpxForm #pxselectedLMXXs").val();
$.post("${ctx}/wzxxfbgjpx/saveOrder.json", parameters,function(data){
if(data["message"]=='success'){
alert("保存成功！");
}
},"json");
}
function checkQuery(){
var lmdm = $("#wzxxfbgjpxForm #pxselectedLMXXs").val();
var start = $("#wzxxfbgjpxForm #fbsjBegin").val();
var end = $("#wzxxfbgjpxForm #fbsjEnd").val();
if(lmdm == ''){
alert("欄目代碼不能為空！");
return false;
}
if(start==''){
alert("開始日期不能為空！");
return false;
}
if(end==''){
alert("結束日期不能為空！");
return false;
}
return true;
}
//選擇 欄目
function px_toSelectLMEdit(){
var opts = px_getDialogOptions();
var url="${ctx}/wzxxfbgjpx/selectLMTree";
$.pdialog.open(url, "wzxxfbgjpx_selectLM_dialog", "選擇欄目", opts);
}
function px_getDialogOptions(){
var options = {};
options.width = 640;
options.height = 360;
options.max = false;
options.mask = true;
options.maxable = false;
options.minable = false;
options.fresh = false;
options.resizable = false;
options.drawable = false;
options.close = true;
options.param = "";
return options;
}
//–>
</script>
<p class="pageHeader">
<form id="wzxxfbgjpxForm" action="${ctx}/wzxxfbgjpx/search" method="post" onsubmit="return navTabSearch(this)">
<input type="hidden" id="lmdmHidden" name="lmdmHidden" value="${lmdm }">
<input type="hidden" id="currentDate" value="<fmt:formatDate value='${now }' pattern='yyyy-MM-dd'/>"/>
<p class="searchBar">
<table class="searchContent">
<tr>
<td class="tdLabel">欄目分類：<font color="red"><b>*</b></font></td>
<td>
<table>
<tr>
<td><input type="text" id="pxselectedLMMCs" name="pxselectedLMMCs" value="${pxLmmc }" readonly="readonly" size="30" /></td>
<td><input type="hidden" id="pxselectedLMXXs" name="pxselectedLMXXs" value="${pxLmdm }"><span onclick="px_toSelectLMEdit();"><a class="btnLook" href="#"><span>欄目</span></a></span></td>
</tr>
</table>
</td>
<td class="tdLabel">發佈時間：<font color="red"><b>*</b></font></td>
<td colspan="3">
<table>
<tr>
<td>
<input type="text" id="fbsjBegin" name="fbsjBegin" class="date" pattern="yyyy-MM-dd" readonly="readonly" value="<fmt:formatDate value='${query.fbsjBegin}' pattern='yyyy-MM-dd'/>"/>
</td>
<td>
<input type="text" name="fbsjEnd" id="fbsjEnd" class="date" pattern="yyyy-MM-dd" readonly="readonly" value="<fmt:formatDate value='${query.fbsjEnd}' pattern='yyyy-MM-dd'/>"/>
</td>
</tr>
</table>
</td>
<td>
<button type="submit" onclick="return checkQuery();">檢索</button><button type="reset">重置</button>
</td>
</tr>
</table><br>
<span><font color="red">*僅可對欄目分類下的已發佈的稿件進行統一排序；已排序的數據查詢時不受發佈時間約束；在排序列表中對數據進行上下拖動即可實現排序。</font> </span>
</p>
</form>
</p>
<p class="pageContent" id="wzxxfbgjspDiv">
<p class="panelBar">
<ul class="toolBar">
</ul>
</p>
<!– 這裡的layoutH是為瞭調整table的高度,如下面的分頁條不見瞭,嘗試增加layoutH –>
<p layoutH="86" id="displayGjPxDiv" style="border: thin solid #99BBE8;overflow: hidden;" align="center">
<p style="border: thin solid #99BBE8;width: 860px;height: 400px;overflow: auto">
<p style="width: 390px;float: left;">
<p style="line-height: 25px;text-align: center;background: #d1e5ff;"><b>可選列表</b></p>
<table width="100%" border="1px" id="leftTable" >
<thead>
<tr bgcolor="#99BBE8">
<th width="20px"> </th>
<th width="25px"/>
<th width="255px" style="line-height: 20px;text-align: center;">稿件標題</th>
<th width="90px" style="line-height: 20px;text-align: center;">作者</th>
</tr>
</thead>
<tbody>
<c:forEach items="${gjList}" var="item" varStatus="status">
<tr>
<td style="text-align: center;">${status.index+1}</td>
<td id="${item.gjid }" style="text-align: center;"><input type="checkbox" name="items" onclick="javascript:leftToRight(this,'${item.gjid }');"></td>
<td align="left" title="<c:out value='${item.bt}'/>"><c:out value='${item.bt}'/></td>
<td style="text-align: center;" title="<c:out value='${item.zz}'/>"><c:out value='${item.zz}'/></td>
</tr>
</c:forEach>
</tbody>
</table>
</p>
<p style="width: 450px;float: right;">
<p style="line-height: 25px;text-align: center;background: #d1e5ff;"><b>排序列表</b></p>
<table width="100%" border="1" id="rightTable">
<thead>
<tr bgcolor="#99BBE8">
<th width="25px"/>
<th width="255px" style="line-height: 20px;text-align: center;">稿件標題</th>
<th width="90px" style="line-height: 20px;text-align: center;">作者</th>
<th width="60px">是否新稿</th>
<th width="60px">是否熱點</th>
</tr>
</thead>
<tbody>
<c:forEach items="${pxList}" var="item" varStatus="status">
<tr id="${item.gjid }" class="${item.gjid }">
<td class="rightGjid" style="text-align: center;"><input type="checkbox" checked="checked" name="itemsRight" onclick="javascript:rightToLeft('${item.gjid }');"></td>
<td class="rightBt" title="${item.bt }">${item.bt }</td>
<td class="rightZz" style="text-align: center;" title="${item.zz }">${item.zz }</td>
<td class="rightSfxg" style="text-align: center;"><input type="checkbox" name="sfxg"></td>
<td class="rightSfrd" style="text-align: center;"><input type="checkbox" name="sfrd"></td>
</tr>
</c:forEach>
</tbody>
</table>
</p>
</p>
<p style="margin: 10px;"><input type="button" onclick="javascript:saveGjPx();" value="保存"></p>
</p>
</p>
左邊的表格是源數據，選中後即會插入到右表，右表取消勾選，會自動刪除行，對應的左邊行也會取消選中。
作者“zhanghouyin-hotmail-com”