easyui-datagrid 列可拖拽及事件冲突

代码是网上找的,功力不够自己写不来。但是有一个问题,拖拽和单击事件冲突了,做了一些修改

// 拓展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 = $('
').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');// 接收对象 // 获取当表格信息 var getData = $(target).datagrid('getData'); var _url = $(target).datagrid('options').url; // 0秒后执行 setTimeout(function(){ swapField(fromField,toField);// 交换拖拽对象和接收对象 //$(target).datagrid();// 后台重新加载表格 // 前端加载拖拽后的表格 $(target).datagrid({ url : '', columns : $(target).datagrid('options').columns, }).datagrid('loadData', {"total" : getData.total, "rows" : getData.rows}); },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// 获取拖动对象的列数据,即下标 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位置上 } } }); } })

你可能感兴趣的:(easyui-datagrid 列可拖拽及事件冲突)