表格和js连用实例.docx

1、表格和js连用实例 drag example * margin:0; padding:0; body text-align:center; .mil text-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

2、 DragClass(id,x,y) /drag class this.id = id; this.posX = x; this.posY = y; this.type = 0; /1:col 2:row 3:table 4:head this.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;

3、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 thi

4、s.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-s

5、elf.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

6、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; ;DragClass.prototype.move = function(e) if(this.ty

7、pe = 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; DragClass.prototype.stop

8、 = function(e) this.check(get_xy(e)0,get_xy(e)1); if(this.type = 3) this.changeStyleBack(); else for(var i in tmp_from) tmp_fromi.changeStyleBack(); document.onmousemove = null; document.onmouseup = null; DragClass.prototype.changeStyle = function() this.obj.style.background = lightgray; this.obj.st

9、yle.zIndex = 1;DragClass.prototype.changeStyleBack = function() this.obj.style.background = this.color; this.obj.style.zIndex = 0;DragClass.prototype.check = function(x,y) /check single var flag = true; var flags = true; for(var key in arr) var i = arrkey.id.split(_)0; var j = arrkey.id.split(_)1; i

10、f(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_e

11、ach(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 = th

12、is.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; DragClass.prototype.table_each = function(o) /交换 var px = this.posX; var py = this.posY; var id = this.id; this.posX = o.posX

13、; 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 fragment for(var i=0;

14、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, 3

15、0+j*100, 30+i*100); obj.obj = span; arr.push(obj); if(i=0 & j=0) /head obj.type = 4; else if(i=0) / col head span.innerHTML = 列头+j; obj.type = 1; else if(j=0) / row head span.innerHTML = 行头+i; obj.type = 2; else span.innerHTML = 表格+i+_+j; obj.type = 3; obj.init(); frag.appendChild(span); $(main).app

16、endChild(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); else if(arrx.id.split(_)0 = i) tmp.push(arrx); tmp.sort(function(a,b) /asc sort var 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 by) return 1; else return -1; ) return tmp;function get_xy(e) /get mouse e = e | window.event; var arr = ; var x = e.pageX | e.clientX; var y = e.pageY | e.clientY; x = x-$(main).offsetLeft; arr0 = x; arr1 = y; return arr;window.onload = function() init();