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+'" style="text-align: center;"><input type="checkbox" name="itemsRight" checked="checked" onclick="javascript:rightToLeft(\''+v_gjid+'\')"></td>'+ '<td title="'+t_bt+'">'+t_bt+'</td>'+ '<td style="text-align: center;" title="'+t_zz+'">'+t_zz+'</td>'+ '<td style="text-align: center;"><input type="checkbox" name="sfxg"></td>'+ '<td 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 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 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 href="#"><span>栏目</span></a></span></td></tr></table></td><td id="fbsjBegin" name="fbsjBegin" 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" 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 id="wzxxfbgjspDiv"><div 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 }" style="text-align: center;"><input type="checkbox" checked="checked" name="itemsRight" onclick="javascript:rightToLeft('${item.gjid }');"></td> <td title="${item.bt }">${item.bt }</td> <td style="text-align: center;" title="${item.zz }">${item.zz }</td> <td style="text-align: center;"><input type="checkbox" name="sfxg"></td> <td 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>