表格和js连用实例.docx

drag example*margin:0;padding:0;bodytext-align:center;.miltext-align:center;line-height:96px;function $(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;DragCtotype.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();elsethis.color = black;this.obj.style.background = this.color;this.obj.innerHTML = 固定表头;this.obj.style.color = white;DragCtotype.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_fromi.px = get_xy(e)0-tmp_fromi.posX;tmp_fromi.py = get_xy(e)1-tmp_fromi.posY;tmp_fromi.changeStyle();else if(self.type = 2)tmp_from = get_tmp(2,self.id.split(_)0);for(var i in tmp_from)tmp_fromi.px = get_xy(e)0-tmp_fromi.posX;tmp_fromi.py = get_xy(e)1-tmp_fromi.posY;tmp_fromi.changeStyle();document.onmousemove = function(e)self.move(e);return false;document.onmouseup = function(e)self.stop(e);return false;DragCtotype.move = function(e)if(this.type = 3)this.obj.style.left = (get_xy(e)0-this.px)+px;this.obj.style.top = (get_xy(e)1-this.py)+px;else if(this.type = 1 | this.type = 2)for(var i in tmp_from)tmp_fromi.obj.style.left = (get_xy(e)0-tmp_fromi.px)+px;tmp_fromi.obj.style.top = (get_xy(e)1-tmp_fromi.py)+px;DragCtotype.stop = function(e)this.check(get_xy(e)0,get_xy(e)1);if(this.type = 3)this.changeStyleBack();elsefor(var i in tmp_from)tmp_fromi.changeStyleBack();document.onmousemove = null;document.onmouseup = null;DragCtotype.changeStyle = function()this.obj.style.background = lightgray;this.obj.style.zIndex = 1;DragCtotype.changeStyleBack = function()this.obj.style.background = this.color;this.obj.style.zIndex = 0;DragCtotype.check = function(x,y) /check singlevar flag = true;var flags = true;for(var key in arr)var i = arrkey.id.split(_)0;var j = arrkey.id.split(_)1;if(this.type = 3 & arrkey.type = 3)if(x30+j*100 & y30+i*100)this.table_each(arrkey);flag = false;break;else if(this.type = 1 & arrkey.type = 1)if(x30+j*100 & y30+i*100)tmp_to = get_tmp(1, j);if(tmp_to.length = tmp_from.length)/alert(ok);for(var ii=0; iitmp_to.length; ii+)tmp_fromii.table_each(tmp_toii);flags = false;break;else if(this.type = 2 & arrkey.type = 2)if(x30+j*100 & y30+i*100)tmp_to = get_tmp(2, i);if(tmp_to.length = tmp_from.length)/alert(ok);for(var ii=0; iitmp_to.length; ii+)tmp_fromii.table_each(tmp_toii);flags = false;break;if(flag)this.obj.style.left = this.posX + px;this.obj.style.top = this.posY + px;if(flags)for(var x in tmp_from)tmp_fromx.obj.style.left = tmp_fromx.posX+px;tmp_fromx.obj.style.top = tmp_fromx.posY+px;DragCtotype.table_each = function(o) /交换var px = this.posX;var py = this.posY;var id = this.id;this.posX = o.posX;this.posY = o.posY;this.id = o.id;o.id = id;o.posX = px;o.posY = py;this.obj.style.left = this.posX + px;this.obj.style.top = this.posY + px;o.obj.style.left = o.posX+px;o.obj.style.top = o.posY+px;function init()var frag = document.createDocumentFragment(); /create fragmentfor(var i=0; irow; i+)for(var j=0; jcol; j+)var span = document.createElement(span);span.className = mil;span.style.position = absolute;span.style.width = width+px;span.style.height = height+px;span.style.top = 30+i*100+px;span.style.left = 30+j*100+px;span.id = i+_+j;var obj = new DragClass(span.id, 30+j*100, 30+i*100);obj.obj = span;arr.push(obj);if(i=0 & j=0) /headobj.type = 4;else if(i=0) / col headspan.innerHTML = 列头+j;obj.type = 1;else if(j=0) / row headspan.innerHTML = 行头+i;obj.type = 2;elsespan.innerHTML = 表格+i+_+j;obj.type = 3;obj.init();frag.appendChild(span); $(main).appendChild(frag);function get_tmp(type, i)var tmp = ;for(var x in arr)if(type = 1)if(arrx.id.split(_)1 = i)tmp.push(arrx);elseif(arrx.id.split(_)0 = i)tmp.push(arrx);tmp.sort(function(a,b) /asc sortvar ax = a.id.split(_)0;var ay = a.id.split(_)1;var bx = b.id.split(_)0;var by = b.id.split(_)1;if(ax bx | ay