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 = $('<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位置上
            }
        }
    });
  }
})

猜你喜欢

转载自blog.csdn.net/junhua_xu/article/details/81669118