Javascript 在引导中使表列可拖动（排序）

我在bootstrap中设计了一个表和一个列名列表。我希望当我拖动列表或表列中的任何列名时，它将同时拖动这两个列名。（表列和列表li）

检查此链接表列是否可拖动。拖动表列时，它将运行

转到鼠标表列名并拖动

$（文档）.ready（函数（）{
$（'.table'）.dragtable（）；
$（'.list'）.dragtable（）；
});
（函数（$）{
$.widget（“akottr.dragtable”{
选项：{
revert:false，//平滑还原
dragHandle:“.table handle”，//移动列的句柄，如果不存在，则整个“th”是句柄
maxMovingRows:40，//1->仅标题。40行应该足够了，其余的通常不在视口中
excludeFooter:false，//在移动其他列时排除页脚行。如果页脚具有colspan，则有意义*/
onlyHeaderThreshold:100，//TODO:尚未实现，在整个列移动/仅头移动之间自动切换
dragaccept:null，//可拖动列->默认全部
persistState:null，//url或函数->在此处插入自定义persistState函数。函数调用为persistState（originalTable）
restoreState:null，//JSON对象或函数：某种实验性的aka快速破解TODO:做得更好
精确：true，//删除像素，以便覆盖表宽度与原始表宽度完全匹配
clickDelay:10，//ms在呈现可排序列表和委派click事件之前等待
包含：null，请参阅http://api.jqueryui.com/sortable/#option-包容，如果您想在2维空间内移动（与轴一起：null），请使用它
光标：“移动”//请参见http://api.jqueryui.com/sortable/#option-光标
cursorAt:false，请参见http://api.jqueryui.com/sortable/#option-库索拉特
距离：0，//请参见http://api.jqueryui.com/sortable/#option-距离，对于即时反馈，使用“0”
公差：“指针”，请参见http://api.jqueryui.com/sortable/#option-容忍度
轴：“x”，请参见http://api.jqueryui.com/sortable/#option-轴，仅允许垂直移动。请使用“x”或null。将其与“包容”设置结合使用
beforeStart:$.noop，//返回FALSE将停止执行链。
搬家前：$.noop，
重组前：$.noop，
beforeStop:$.noop
},
可原创：{
el:空，
selectedHandle:null，
排序器：空，
startIndex:0，
结束索引：0
},
可排序：{
el:$（），
selectedHandle:$（），
移动行：$（）
},
persistState:function（）{
var_this=这个；
this.originalTable.el.find（'th'）。每个（函数（i）{
如果（this.id！=''）{
_this.originalTable.sortOrder[this.id]=i；
}
});
$.ajax({
url:this.options.persistState，
数据：this.originalTable.sortOrder
});
},
/*
*persistObj看起来像
*{'id1'：'2'，'id3'：'3'，'id2'：'1'}
*这张桌子看起来像
*| id2 | id1 | id3|
*/
_restoreState:功能（persistObj）{
for（persistObj中的变量n）{
this.originalTable.startIndex=$（'#'+n）.closest（'th'）.prevAll（）.size（）+1；
this.originalTable.endIndex=parseInt（persistObj[n]+1,10）；
这是泡泡糖（）；
}
},
//将移动的列向左或向右冒泡
_泡泡糖：函数（）{
变量i，j，col1，col2；
var from=this.originalTable.startIndex；
var to=this.originalTable.endIndex；
/*找到thead和tbody的孩子们。
*仅处理内部表的立即tr children.Bugfix
*/
var thtb=this.originalTable.el.children（）；
if（this.options.excludeFooter）{
thtb=thtb.not（'tfoot'）；
}
如果（从<到）{
for（i=from；itr>td:n个子项（'+i+'））
.add（thtb.find（'>tr>th:n子项（'+i+'）））；
col2=thtb.find（'>tr>td:n个子项（'+（i+1）+'））
.add（thtb.find（'>tr>th:n子代（'+（i+1）+'））；
对于（j=0；j到；i--）{
col1=thtb.find（'>tr>td:n个子项（'+i+'））
.add（thtb.find（'>tr>th:n子项（'+i+'）））；
col2=thtb.find（'>tr>td:n子代（'+（i-1）+'））
.add（thtb.find（'>tr>th:n子代（'+（i-1）+'））；
对于（j=0；j处理程序现在已完成
_this.originalTable.selectedHandle.removeClass（'dragtable-handle-selected'）；
//添加禁用类->重组即将开始
_this.sortable.el.sortable（“禁用”）；
_this.sortable.el.addClass（'dragtable-disabled'）；
_this.options.beforeOrganization（_this.originable，_this.sortable）；
//重组是异步的吗
//对于chrome，有一点超过1毫秒，因为我们想强制重新加载
_this.originalTable.endIndex=_this.sortable.movingRow.prevAll（）.size（）+1；
setTimeout（_this._tablebackroundprocessing（），50）；
};
<div class="table-responsive container">
    <table class="table table-bordered">
        <thead>
            <tr class="dnd-moved">
                <th>Column #1</th>
                <th>Column #2</th>
                <th>Column #3</th>
                <th>Column #4</th>
                <th>Column #5</th>
            </tr>
        </thead>
        <tbody>
            <tr class="dnd-moved">
                <td>Row #1-1</td>
                <td>Row #1-2</td>
                <td>Row #1-3</td>
                <td>Row #1-4</td>
                <td>Row #1-5</td>
            </tr>
            <tr class="dnd-moved">
                <td>Row #2-1</td>
                <td>Row #2-2</td>
                <td>Row #2-3</td>
                <td>Row #2-4</td>
                <td>Row #2-5</td>
            </tr>
            <tr class="dnd-moved">
                <td>Row #3-1</td>
                <td>Row #3-2</td>
                <td>Row #3-3</td>
                <td>Row #3-4</td>
                <td>Row #3-5</td>
            </tr>
        </tbody>
    </table>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/dragndrop.table.columns.js" type="text/javascript"></script>
<script>
    $('.table').dragableColumns();
</script>