话不多说，代码如下，
需要用到Jquery的如下JS：
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.sortable.js
jquery.js
jsp页面：
<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>
<div 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'/>"/>
<div 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>
</div>
</form>
</div>
<div class="pageContent" id="wzxxfbgjspDiv">
<div class="panelBar">
<ul class="toolBar">
</ul>
</div>
<!-- 这里的layoutH是为了调整table的高度,如下面的分页条不见了,尝试增加layoutH -->
<div layoutH="86" id="displayGjPxDiv" style="border: thin solid #99BBE8;overflow: hidden;" align="center">
<div style="border: thin solid #99BBE8;width: 860px;height: 400px;overflow: auto">
<div style="width: 390px;float: left;">
<div style="line-height: 25px;text-align: center;background: #d1e5ff;"><b>可选列表</b></div>
<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>
</div>
<div style="width: 450px;float: right;">
<div style="line-height: 25px;text-align: center;background: #d1e5ff;"><b>排序列表</b></div>
<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>
</div>
</div>
<div style="margin: 10px;"><input type="button" onclick="javascript:saveGjPx();" value="保存"></div>
</div>
</div>
左边的表格是源数据，选中后即会插入到右表，右表取消勾选，会自动删除行，对应的左边行也会取消选中。
