最近用到了网页里面表格的每条数据拖拽排序，具体实现原理如下：
前台实现方法，这里主要用到了jquery的拖拽排序组件，比如jqGrid（http://www.trirand.com/blog/），sortable（http://jqueryui.com/sortable/）,前台封装的组件用的都是很简单的，在这里就不多总结了，如果想深入研究拖拽的js实现原理，可以查看源码。
后台设计，表中有个rank字段控制排序，每次找最大的一个+1。
当前台列表展示的时候。
将rank字段的附带着在每一个行：
如下：（<input type="hidden" value="${shpvo.rank " />" name="rnk"/>）
本页的默认序列号放入一个数组中：
如下：
var seqlst= [];
$("input[name='rnk']").each(function(idx){
seqlst.push($("input[name='rnk']").eq(idx).val());
})
$("#seqlst").val(seqlst.toString());
当执行拖拽排序的时候，每行存的id并不发生变化，但是从第一行到最后一行依次id顺序重新组成一个新的数组：
var ids = [];
for(var i = 0 , l = $("#ectableArea .zzp-table01-body tbody tr").length;i<l;i++){
ids.push($("#ectableArea .zzp-table01-body tbody tr:eq(" + i + ")").find(".checkbox").attr("id"));
}
以上两步就得到给后台传递的id数组和序号数组：执行ajax和后台交互：
$.ajax({
type: "POST",
url: "${ctx}/ship.do?method=savePageContentSort",
data:{"ids":ids.toString(),"sequence":seq.toString()},
dataType: "text",
timeout :5000,
cache :false,
async: true,
success: function(data){}
})
最后后台处理更新rank,简写实现代码如下：
String[] idList=ids.split(",");
String[] seqList=sequence.split(",");
List<OmShipTypeDO> list=new ArrayList<OmShipTypeDO>();
for(int i=0;i<idList.length;i++){
OmShipTypeDO obj=shipTypeDao.findById(Integer.parseInt(idList[i]));
//id对应的rank进行重置
obj.setRank(Byte.parseByte(seqList[i]));
list.add(obj);
}
shipTypeDao.saveOrUpdateAll(lst);
以上的代码前台后台的写法都是简写，只是为了简易的说明拖拽排序的前台后台交互实现原理。