easyui datagrid列拖拽

<script type="text/javascript">
var cols = [{ field: 'testName', title: '<span class="dropitem">測試名</span>', align: 'center',width:120 },
{ field: 'testValue', title: '<span class="dropitem">測試值</span>', align: 'center', width: 120}];
var url="/Test/Test1Data";
$(document).ready(function () {
init();
drag();//綁定datagrid，綁定拖拽
});
function init() {
$("#test").datagrid({
url: url,
type: "post",
datatype: "json",
width: 600,
height: 280,
loadMsg: "數據加載中，請稍後...",
nowrap: true,
rownumbers: false,
pagination: true,
singleSelect: true,
columns: [cols],
//bind數據成功從新設置拖動對象
onLoadSuccess: function (data) {
drag();
}
});
}
//拖動drag和drop都是datagrid的頭的datagrid-cell
function drag() {
$('.datagrid-header-inner .datagrid-cell').draggable({
revert: true,
proxy: 'clone'
}).droppable({
accept: '.datagrid-header-inner .datagrid-cell',
onDrop: function (e, source) {
//取得拖動源的html值
var src = $(e.currentTarget.innerHTML).html();
//取得拖動目標的html值
var sou = $(source.innerHTML).html();
var tempcolsrc;//拖動後源和目標列交換
var tempcolsou;
var tempcols=[];
for (var i = 0; i < cols.length; i++) {
if (cols[i].title == sou) {
tempcolsrc = cols[i];//循環讀一遍列把源和目標列都記下來
}
else if (cols[i].title == src) {
tempcolsou = cols[i];
}
}
for (var i = 0; i < cols.length; i++) {
//再循環一遍，把源和目標的列對換
var col = {
field: cols[i].field,
title: cols[i].title,
align: cols[i].align,
width: cols[i].width
};
if (cols[i].title == sou) {
col = tempcolsou;
}
else if (cols[i].title == src) {
col = tempcolsrc;
}
tempcols.push(col);
}
cols = tempcols;
//1秒後執行重綁定datagrid操做。多是revert須要時間,這邊若是沒有作延時就直接重綁 就會出錯。
//我目前的水平就想到這個笨辦法,各位若是有好的想法建議能夠提出來討論下。
timeid = setTimeout("init()", 1000);
}
});
}
</script>

<div id="test"></div>

 上效果圖：

原datagrid   

 

 

拖動列