jquery.tablednd_0_5.js 实现表格（table）行级拖拽

 最近要实现一个行级别的排序功能，我采用的是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);" /> &nbsp; <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然后再执行拖拽的一些操作的 所以没有问题的；

对此插件 不是很了解 所以只是把自己的问题记录下来 以供参考，具体使用 可以查看源码！