最近要实现一个行级别的排序功能，我采用的是jquery的一个插件jquery.tablednd_0_5.js 来实现的，大体如下配置；
<script type=”text/javascript” src=”/res/js/jquery.js”></script>
<script type=”text/javascript” src=”/res/js/jquery.tablednd_0_5.js”></script>
这个不用说 肯定是必须的，
接下来构建自己的表格，当然首先要写一些css样式，（其实没啥用） 可以参考github上 https://github.com/isocra/TableDnD 进行配置开发
tr.myDragClass td {
/*position: fixed;*/
color: yellow;
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 8px black, 0 0 6px black, 0 0 6px black;
background-color: #999;
-webkit-box-shadow: 0 12px 14px -12px #111 inset, 0 -2px 2px -1px #333 inset;
}
td.dragHandle {
}
这个css样式完全是要控制拖拽时候的样式以及控制那些cell可以进行拖拽
<table class=”email sale_cont” cellpadding=”0″ cellspacing=”0″ id=”tb1″ style=”width:567px;”>
<thead>
<#if dataList??&&(dataList?size>0)>
<tr>
<th width=”20%”>序号</th>
<th width=”20%” style=”display:none;”>地域ID</th>
<th width=”20%”>地域</th>
<th width=”20%”>排序</th>
<th width=”20%”>操作</th>
</tr>
</thead>
<tbody>
<#list dataList?sort_by(“sort_no”) as dt>
<tr style=”background:#EEEEEE;” id=”${dt.area_id}”>
<input type=”hidden” value=”${dt.area_id}&${dt.area_name}&${dt.sort_no}”></input>
<td class=”dragHandle”>${dt_index+1}</td>
<td style=”display:none;” name=”ids”>${dt.area_id}</td>
<td class=”dragHandle”>${dt.area_name}</td>
<td class=”dragHandle”>${dt.sort_no}</td>
<td style=”text-align:center;”>
<!–<input type=”button” name=”btn1″ value=”↑” οnclick=”moveTr(this);” /> <input type=”button” name=”btn2″ value=”↓” οnclick=”moveTr(this);” />–>
<a id =”${dt.area_id}” href=”#” οnclick=”delRow(this,0,3,’area’)”>删除<a/>
</td>
</tr>
</#list>
<#else>
<tr><td colspan=”15″>暂无数据</td></tr>
</#if>
</tbody>
</table>
表格样式 才用如上代码进行构建，数据由freemaker展示
如下JS为加载表格来进行拖拽功能的操作
function dragtb(){
$().ready(function(){
$(“#tb1”).tableDnD({
onDragClass:”myDragClass”,
onDrop:function(table,row){
//获取id为table的元素
// var table = document.getElementById(“tb1”);
var tr = $(table).find(‘tbody’).children(‘tr’);
//获取table元素所包含的tr元素集合
//遍历所有的tr
for (var i = 0; i < tr.length; i++) {
var hidevalue = $(tr[i]).children(‘input’).val();
//获取拖动排序结束后新表格中，获取每一行的rowindex
var rowindex = tr[i].rowIndex;
tr[i].cells[0].innerHTML=rowindex;
tr[i].cells[3].innerHTML=rowindex;
$(tr[i]).children(‘input’).val(hidevalue.substring(0,hidevalue.lastIndexOf(‘&’)+1)+rowindex);
}
},
dragHandle: “dragHandle”
});
});
}
另外要注意的是，当document加载的时候表格的行是可以进行拖拽的，如果你在document加载之后又动态的为table添加了tr的话 name就需要重新加载一个document才可以对新加的行进行拖拽，我才用了比较笨的方法，就是在执行完动态添加tr之后调用了一下dragtb() 我的这个方法，这样就可以了 ，因为我这个方法在执行的时候 是加载document然后再执行拖拽的一些操作的 所以没有问题的；
对此插件 不是很了解 所以只是把自己的问题记录下来 以供参考，具体使用 可以查看源码！