表格和js连用实例.docxVIP

htmlheadtitledrag example/titlestyle*{margin:0;padding:0;}body{text-align:center;}.mil{text-align:center;line-height:96px;}/style/headbodydiv id=main style=position:relative;margin:0 auto;width:500px;height:500px;border:1px solid red;/div/body/htmlscript type=text/javascriptfunction $(id){return document.getElementById(id);}var row = 4; var col = 4;var width = 96;var height = 96;var isIE = false;var isFF = false;var arr = [];var tmp_from = [];var tmp_to = [];function DragClass(id,x,y){ //drag classthis.id = id;this.posX = x;this.posY = y;this.type = 0; //1:col 2:row 3:table 4:headthis.obj = null;this.color = null;this.px = null;this.py = null;}DragClass.prototype.init = function(){if(this.type == 1){ this.color = blue;this.obj.style.background = this.color;this.obj.style.color = yellow;this.start();}else if(this.type == 2){this.color = green;this.obj.style.background = this.color;this.obj.style.color = yellow;this.start();}else if(this.type == 3){this.color = red;this.obj.style.background = red;this.obj.style.color = yellow;this.start();}else{this.color = black;this.obj.style.background = this.color;this.obj.innerHTML = 固定表头;this.obj.style.color = white;}};DragClass.prototype.start = function(){var self = this;this.obj.onmousedown = function(e){e = e || window.event;if(self.type == 3){self.px = get_xy(e)[0]-self.posX;self.py = get_xy(e)[1]-self.posY;self.changeStyle();}else if(self.type == 1){tmp_from = get_tmp(1,self.id.split(_)[1]);for(var i in tmp_from){tmp_from[i].px = get_xy(e)[0]-tmp_from[i].posX;tmp_from[i].py = get_xy(e)[1]-tmp_from[i].posY;tmp_from[i].changeStyle();}}else if(self.type == 2){tmp_from = get_tmp(2,self.id.split(_)[0]);for(var i in tmp_from){tmp_from[i].px = get_xy(e)[0]-tmp_from[i].posX;tmp_from[i].py = get_xy(e)[1]-tmp_from[i].posY;tmp_from[i].changeStyle();}}document.onmousemove = function(e){self.move(e);return false;};document.onmouseup = function(e){self.stop(e);};return false;};}DragClass.prototype.move = function(e){if(this.type == 3