draggable datagrid columns

 1 $.extend($.fn.datagrid.methods,{
 2     columnMoving: function(jq){
 3         return jq.each(function(){
 4             var target = this;
 5             var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
 6             cells.draggable({
 7                 revert:true,
 8                 cursor:'pointer',
 9                 edge:5,
10                 proxy:function(source){
11                     var p = $('<div class="tree-node-proxy tree-dnd-no" style="position:absolute;border:1px solid #ff0000"/>').appendTo('body');
12                     p.html($(source).text());
13                     p.hide();
14                     return p;
15                 },
16                 onBeforeDrag:function(e){
17                     e.data.startLeft = $(this).offset().left;
18                     e.data.startTop = $(this).offset().top;
19                 },
20                 onStartDrag: function(){
21                     $(this).draggable('proxy').css({
22                         left:-10000,
23                         top:-10000
24                     });
25                 },
26                 onDrag:function(e){
27                     $(this).draggable('proxy').show().css({
28                         left:e.pageX+15,
29                         top:e.pageY+15
30                     });
31                     return false;
32                 }
33             }).droppable({
34                 accept:'td[field]',
35                 onDragOver:function(e,source){
36                     $(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
37                     $(this).css('border-left','1px solid #ff0000');
38                 },
39                 onDragLeave:function(e,source){
40                     $(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
41                     $(this).css('border-left',0);
42                 },
43                 onDrop:function(e,source){
44                     $(this).css('border-left',0);
45                     var fromField = $(source).attr('field');
46                     var toField = $(this).attr('field');
47                     setTimeout(function(){
48                         moveField(fromField,toField);
49                         $(target).datagrid();
50                         $(target).datagrid('columnMoving');
51                     },0);
52                 }
53             });
54             
55             // move field to another location
56             function moveField(from,to){
57                 var columns = $(target).datagrid('options').columns;
58                 var cc = columns[0];
59                 var c = _remove(from);
60                 if (c){
61                     _insert(to,c);
62                 }
63                 
64                 function _remove(field){
65                     for(var i=0; i<cc.length; i++){
66                         if (cc[i].field == field){
67                             var c = cc[i];
68                             cc.splice(i,1);
69                             return c;
70                         }
71                     }
72                     return null;
73                 }
74                 function _insert(field,c){
75                     var newcc = [];
76                     for(var i=0; i<cc.length; i++){
77                         if (cc[i].field == field){
78                             newcc.push(c);
79                         }
80                         newcc.push(cc[i]);
81                     }
82                     columns[0] = newcc;
83                 }
84             }
85         });
86     }
87 });

// dg   ， 
1 $('#tt').datagrid('columnMoving');