使用HTML5拖拽实现表格列移动

纯前端的移动,不重载数据,不支持换页和数据刷新

实现代码,调用在表格加载完成之后

function add_drag_th(){
		//允许放入  
        $("#callGrid tr>th").on("dragover",function(e){  
            e.originalEvent.preventDefault();  
        });
        //拿起
        $("#callGrid tr>th").on("dragstart",function(e){  
        	e.originalEvent.dataTransfer.setData("obj_add",e.currentTarget.cellIndex);  
        });
        //放下
        $("#callGrid tr>th").on("drop",function(e){  
            e.originalEvent.preventDefault;  
            var i = parseInt(e.originalEvent.dataTransfer.getData("obj_add"));//所拿起的th列下标  
            var d = this.cellIndex;//被放入的列下标
            var _t = this;
            $("#callGrid tr>th").each(function(){
            	var j = this;
            	if(j.cellIndex == i){
            		_t.before(j);
            		return false;
            	}
            });
            $("#callGrid tbody>tr").each(function(){
            	var drag = "";//拿起的td
            	var drop = "";//放下的td
            	$(this).children().each(function(){
            		if(this.cellIndex == i){
            			drag = this;
            		}
            		if(this.cellIndex == d){
            			drop = this;
            		}
            	});
            	if(drag != undefined && drop != undefined && drag != "" && drop != ""){
            		drop.before(drag);
            	}
            });
        });
	}

效果