$.extend ($.fn.datagrid.methods,{
Columnmoving:function (JQ) {
Return Jq.each (function () {
var target = this;
var cells = $ (this). DataGrid (' Getpanel '). Find (' Div.datagrid-header Td[field] ');
Cells.draggable ({
Revert:true,
Cursor: ' pointer ',
Edge:5,
Proxy:function (source) {
var p = $ (' <div class= "Tree-node-proxy tree-dnd-no" style= "position:absolute;border:1px solid #ff0000"/> "). AppendTo (' body ');
P.html ($ (source). text ());
P.hide ();
return p;
},
Onbeforedrag:function (e) {
E.data.startleft = $ (this). Offset (). Left;
E.data.starttop = $ (this). Offset (). Top;
},
Onstartdrag:function () {
$ (this). Draggable (' proxy '). CSS ({
left:-10000,
top:-10000
});
},
Ondrag:function (e) {
$ (this). Draggable (' proxy '). Show (). CSS ({
LEFT:E.PAGEX+15,
Top:e.pagey+15
});
return false;
}
}). droppable ({
Accept: ' Td[field] ',
Ondragover:function (E,source) {
$ (source). draggable (' proxy '). Removeclass (' Tree-dnd-no '). addclass (' Tree-dnd-yes ');
$ (this). CSS (' border-left ', ' 1px solid #ff0000 ');
},
Ondragleave:function (E,source) {
$ (source). draggable (' proxy '). Removeclass (' Tree-dnd-yes '). addclass (' tree-dnd-no ');
$ (this). CSS (' Border-left ', 0);
},
Ondrop:function (E,source) {
$ (this). CSS (' Border-left ', 0);
var Fromfield = $ (source). attr (' field ');
var Tofield = $ (this). attr (' field ');
SetTimeout (function () {
Movefield (Fromfield,tofield);
$ (target). DataGrid ();
$ (target). DataGrid (' columnmoving ');
},0);
}
});
Move field to another location
function Movefield (from,to) {
var columns = $ (target). DataGrid (' Options '). columns;
var cc = columns[0];
var C = _remove (from);
if (c) {
_insert (TO,C);
}
function _remove (field) {
for (var i=0; i<cc.length; i++) {
if (Cc[i].field = = field) {
var c = Cc[i];
Cc.splice (i,1);
return C;
}
}
return null;
}
function _insert (field,c) {
var NEWCC = [];
for (var i=0; i<cc.length; i++) {
if (Cc[i].field = = field) {
Newcc.push (c);
}
Newcc.push (Cc[i]);
}
Columns[0] = NEWCC;
}
}
});
}
});
This method is called when the DG is initialized
$ (' #tt '). DataGrid (' columnmoving ');
draggable DataGrid Columns