jquery實現table 行拖動排序

話不多說，代碼如下，
需要用到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>

左邊的表格是源數據，選中後即會插入到右表，右表取消勾選，會自動刪除行，對應的左邊行也會取消選中。

[img]http://dl.iteye.com/upload/attachment/559088/244e5279-0ebc-3147-9385-4c458dae9e4a.jpg[/img]