代码是网上找的,功力不够自己写不来。但是有一个问题,拖拽和单击事件冲突了,做了一些修改
// 拓展datagrid方法
$.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:0,
axis : "v",
proxy:function(source){
// 创建一个拖动的运用对象
var p = $('<div class="tree-node-proxy tree-dnd-no" style="position:absolute;border:1px solid #DDDDDD;background-color:#F6F6F6"/>').appendTo('body');
p.width($(source).width());// 对象的宽度为拖动目标的宽度
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){
// 得到用于拖拽的对象
var prox =$(this).draggable('proxy');
// 0.005秒后,显示对象;防止与点击事件冲突
setTimeout(function(){
prox.show().css({
left:e.pageX+15,
top:e.pageY
});
return false;
},5)
}
}).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 #DDDDDD');
},
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');// 接收对象
// 0秒后执行
setTimeout(function(){
swapField(fromField,toField);// 交换拖拽对象和接收对象
$(target).datagrid();// 重新加载表格
$(target).datagrid('columnMoving');
},0);
}
});
// swap Field to another location
function swapField(from,to){
var columns = $(target).datagrid('options').columns;
var cc = columns[0];// 得到所有列的数据
_swap(from,to);
function _swap(fromfiled,tofiled){
var fromtemp;
var totemp;
var fromindex = 0;
var toindex = 0;
for(var i=0; i<cc.length; i++){
// 获取拖动对象的列数据,即下标
if (cc[i].field == fromfiled){
fromindex = i;
fromtemp = cc[i];
}
// 获取接收对象的列的数据
if(cc[i].field == tofiled){
toindex = i;
totemp = cc[i];
}
}
cc.splice(fromindex,1,totemp);// 删除fromindex位置上的对象,再将totemp添加到fromindex位置上
cc.splice(toindex,1,fromtemp);// 删除toindex位置上的对象,再将fromtemp添加到toindex位置上
}
}
});
}
})