复制代码代码如下:
<!Doctype HTML公共“ - // W3C // DTD XHTML 1.0 Transitional // en”“” http://www.org/tr/tr/xhtml1/dtd/xhtml1-xhtml1-transitional.transitional.dtdd'>
<html xmlns =“ http://www.w3.org/1999/xhtml”>
<头>
<meta http-equiv =“ content-type” content =“ text /html; charset = gb2312” />
<title>表</title>
</head>
<style type =“ text/css”>
身体{边距:0px;填充:0px;字体大小:12px}
.div {高度:160px; width:160px;位置:绝对;文字平衡:中心; }
.demo1 {border:1px实心#96c2f1; backendbort-color:#eff7ff; left:150px; top:20px}
.demo2 {border:1px实心#9BDF70; background-color:#f0fbeb; left:450px; top:20px}
.demo3 {border:1px实心#bbe1f1;背景色:#eefaff; left:750px; top:20px}
.demo4 {border:1px实心#96c2f1; background-color:#eefaff; left:150px; top:220px}
.demo5 {border:1px实心#ffcc00; backendbourd-color:#fffff7; left:450px; top:220px}
.demo6 {border:1px实心#e3e197; background-color:#ffffdd; left:750px; top:220px}
.demo7 {border:1px固体#adcd3c; backendbound-color:#f2fddb; left:150px; top:420px}
.demo8 {border:1px实心#f8b3d0; backendbourd-color:#fff5fa; left:450px; top:420px}
.demo9 {border:1px实心#D3D3D3; backendbourd-color:#f7f7f7; left:750px; top:420px}
。
</style>
<身体>
<div id ='demo1'class ='div demo1'> demo1 </div>
<div ID ='demo2'class ='div demo2'> demo2 </div>
<div id ='demo3'class ='div demo3'> demo3 </div>
<div id ='demo4'class ='div demo4'> demo4 </div>
<div ID ='demo5'class ='div demo5'> demo5 </div>
<div id ='demo6'class ='div demo6'> demo6 </div>
<div id ='demo7'class ='div demo7'> demo7 </div>
<div ID ='demo8'class ='div demo8'> demo8 </div>
<div ID ='demo9'class ='div demo9'> demo9 </div>
<脚本语言=“ javascript”>
(函数(窗口,未定义){
window.sys = function(ua){
var b = {
ie:/msie/.test(UA)&&!/pera/.test(ua),
opera: /opera/.test(UA),
Safari:/webkit/.test(UA)&&!/chrome/.test(ua),
firefox: /firefox/.test(UA),
chrome: /chrome/.test(UA)
},vmark =“”;
for(b)中的var i {
如果(b [i]){vmark =“ safari” == i? “版本”:i;休息; }
}
b.version = vmark && regexp(“(?::“ + vmark +”)[///:]([// d。] +)”)。测试(ua)? REGEXP。$ 1:“ 0”;
b.ie6 = b.ie && parseint(B.Version,10)== 6;
b.ie7 = b.ie && parseint(B.Version,10)== 7;
b.ie8 = b.ie && parseint(B.Version,10)== 8;
返回b;
}(window.navigator.useragent.tolowercase());
window.sys.ie6 && document.execcommand(“ backgroundImageCache”,false,true);
窗口。$ = function(id){
返回document.getElementById(id);
};
window.addlistener = function(element,e,fn){
!element.events &&(element.events = {});
element.events [e] &&(element.events [e] [addListener.guid ++] = fn)||(element.events [e] = {'0':fn});
element.AddeventListener?element.AddeventListener(e,fn,false):element.Attachevent(“ on”“ on” + e,fn);
};
window.addlistener.guid = 1;
window.removelistener = function(element,e,fn){
var handlers = element.events [e],type;
如果(fn){
对于(输入处理程序)
if(操作者[type] === fn){
element.removeEventListener?element.removeEventListener(e,fn,false):element.detachevent(“ on” + e,fn);
删除处理程序[type];
}
}别的{
对于(输入处理程序){
element.RemoveEventListener?element.RemoveEventListener(e,handlers [type],false):element.detachevent(“ on” + e,handlers [type]);
删除处理程序[type];
}
}
};
window.setstyle =函数(e,o){
if(typeof o ==“字符串”)
e.style.csstext = o;
别的
对于(o中的var i)
e.Style [i] = o [i];
};
var slice = array.prototype.slice;
window.bind = function(object,fun){
var args = slice.call(gragments).slice(2);
返回函数(){
返回fun.apply(对象,args);
};
};
window.bindaseventlistener = function(object,fun,args){
var args = slice.call(gragments).slice(2);
返回功能(事件){
返回fun.apply(对象,[event || window.event] .concat(args));
}
};
//复制JQ
window.extend = function(){
var target =参数[0] || {},i = 1,长度= grenguments.length,deep = true,options;
if(type target ===“ boolean”){
deep =目标;
target =参数[1] || {};
i = 2;
}
if(typeof target!==“ object” && object.prototype.tostring.call(target)!=“ [对象函数]”)
target = {};
for(; i <长度; i ++){
if(((options = gragments [i])!= null)
对于(选项中的var名称){
var src = target [name],copy = options [name];
if(target ===复制)
继续;
if(deep && copy && typeof copy ===“ object” &&!copy.nodeType){
target [name] = gragments.callee(deep,src ||(copy.length!= null?[]:{}),copy);
}
否则(复制!==未定义)
目标[名称] =复制;
}
}
返回目标;
};
//复制JQ
window.each = function(对象,回调,args){
var名称,i = 0,长度= object.length;
如果(args){
args = array.prototype.slice.call(gragments).slice(2);
if(length === undefined){
对于(对象中的名称)
if(callback.apply(对象[名称],[名称,对象[name]]。concat(args))=== false)
休息;
} 别的
for(; i <长度; i ++)
if(callback.apply(object [i],[i,object [i]]。concat(args))=== false)//
休息;
} 别的 {
if(length === undefined){
对于(对象中的名称)
if(callback.call(object [name],name,object [name])=== false)
休息;
} 别的
for(var value =对象[0];
i <length && callback.call(value,i,value)!== false;值=对象[++ i]){}
}
返回对象;
};
window.currentStyle = function(element){
返回元素。CurrentStyle|| document.defaultview.getCompentedstyle(element,null);
};
window.objpos = function(elem){
var左= 0,top = 0,右= 0,底部= 0,doc = elem? elem.ownerdocument:文档;
if(!elem.getBoundingClientRect || window.sys.ie8)
var n = elem;
while(n){左 += n.offsetleft,top += n.offsettop; n = n.offsetparent; };
右=左 + Elem.OffSetWidth;底部= top + elem.offsetheight;
} 别的 {
var rect = elem.getBoundingClientRect();
左=右= doc.documentElement.scrollleft || doc.body.scrollleft;
top = bottom = doc.documentElement.scrollleft || doc.body.scrollleft;
左 += rect.left;右 += rect.right;
top += rect.top;底部 += rect.bottom;
}
返回{“左”:左,“ top”:top,“右”:右,“底部”:bottom};
};
window.hasclass = function(element,className){
return Element.ClassName.Match(new Regexp('(// s |^)'+className+'(// s | $)'));
};
window.addclass = function(element,className){
!
};
window.removeclass = function(element,className){
window.hasclass(element,className)&&(element.ClassName = element.ClassName.replace(new Regexp('(// s |^)'+className+'(// s | $)'),'),'),);
}
})(窗户);
var drag = {
Elem:NULL,
zindex:0,
选项 : {},
init:function(){
每个(参数,函数(i,elem,othis){
AddListener(Elem,“ Mousedown”,BindaseVentListener(Othis,othis.start,Elem));
},这);
},,
开始:功能(E,Elem){
var elem = this.elem = elem;
Elem.Style.Zindex = ++ this.zindex;
this.x = e.clientx -elem.offsetleft;
this.y = e.clienty -elem.offsettop;
this.marginleft = parseint(CurrentStyle(Elem).marginleft)|| 0;
this.margintop = parseint(currentstyle(elem).margintop)|| 0;
sys.ie?elem.setCapture():e.preventDefault();
AddListener(文档,“ Mousemove”,BindaseVentListener(this,this.move));
addListener(文档,“鼠标”,bind(this,this.up));
this.options.callbackmove && this.options.callbackmove(this.elem);
},,
移动:功能(e){
window.getSelection? window.getSelection()。removeAllranges():document.selection.empty();
var ileft = e.clientx -this.x,itop = e.clienty -this.y; obj = this.elem;
obj.style.left = ileft -this.marginleft +“ px”;
obj.style.top = itop -this.margintop +“ px”;
this.options.callbackmove && this.options.callbackmove(this.elem);
},,
向上:function(){
removelistener(文档,“ mousemove”);
removelistener(文档,'MouseUp');
sys.ie && this.elem.releasecapture();
this.options.callbackup && this.options.callbackup(this.elem);
}
};
var重叠= {
旅馆:{},//所有需要计算重合的元素
超级列表:{},//已经重合的元素
init:function(elems){
每个(elems,函数(i,elem,othis){
elem.setAttribute('重叠',i);
var ret = objpos(elem),l = ret.left,t = ret.top,b = ret.bottom,r = ret.right;
othis.hostel [i] = {elem:elem,lefttopDot:{x:l,y:t},leftbottomDot:{x:l,y:b},righttopdot:{x:r,y:t},rightbottomdot:rightbottomdot:{x:r,y:r,y:r,y:b}}};
},这);
},,
setElem:function(elem){
如果(!elem)返回;
var ret = objpos(elem),l = ret.left,t = ret.top,b = ret.bottom,r = ret.right;
this.hostel [elem.getAttribute('overlap')] = {elem:elem,lefttopdot:{x:l,y:t},leftbottomdot:{x:x:l,y:b},righttopdot:righttopdot:{x:x:x:r,y:r,y:r,y:t},rightbottomdot:
},,
//判断是否重合
isOverLap:function(my){
var obj = {},my = this.hostel [my.getAttribute('ryplap')];
每个(this.hostel,函数(键,config,othis){
//是元素本身是元素本身
if(config.elem === my.elem)返回;
//判断2个div是否重合如果不重合则返回
if(my.leftbottomdot.y <= config..lefttopdot.y || my.lefttopdot.y> = config..leftbottomdot.y || my.rightopdot.x <= config..lefttopdot.x |
返回;
obj [config.elem.getAttribute('reverlap')] = [config.elem,othis.howoverlap(my,config)];
},这);
返回obj;
},,
//判断重合面积
HowOverLap:功能(我的,其他){
var l = other.LeftBottomDot.x,r = other.righttopdot.x,t = other.lefttopdot.y,b = eleth.leftbottomdot.y,arr = [],
lt = this。
lb = this。
rt = this。
rb = this。
lt && arr.push(lt)|| lb && arr.push(lb)|| rt && arr.push(rt)|| rb && arr.push(rb);
如果(!arr [0])返回0;
//一个点一个点一个点个点都在其中个点都在其中个点都在其中
if(arr.length === 1 || arr.length === 2){
var key = arr [0] .split(' - '),x1 = my [key [key [0]]。x,y1 = my [key [key [key [0]]。
返回Math.Abs((x1-x2)*(y1-y2));
};
//完全重合
if(arr.length === 4){
返回162*162;
};
},,
//看点是不是在另一个div
包括:函数(DOT,L,R,T,B,KEY){
返回(dot.x> = l && dot.x <= r && dot.y> = t && dot.y <= b)?key:false;
}
};
window.onload = function(){
扩展(drag.options,{callbackmove:move,callbackup:up});
功能向上(Elem){
对于(重叠中的var n。
removeclass(重叠。overlaplist[n] [0],'focus')
Overlap.overlaplist = {};
drag.elem.innerhtml = drag.elem.id;
};
功能移动(Elem){
重叠。Setelem(Elem);
// p为判断返回的obj
var obj = offlap.isoverlap(elem),name,p = function(o){
对于(o中的名称)
返回false;
返回true;
}(obj);
//如果是个空对象如果是个空对象
如果(p){
向上();
返回;
};
var str ='';
重叠。跨plaplist = obj;
每个(重叠。hostel,函数(键,config){
如果(obj [key]){
addClass(obj [key] [0],'focus');
str = str+'与'+obj [key] [0] .id+'重合的面积为:'+obj [key] [1]+'</br>';
}别的{
removeclass(config.elem,'focus');
}
});
drag.elem.innerhtml = str;
};
drag.init($('demo1'),$('demo2'),$('demo3'),$('demo4'),$('demo5'),$('emo6'),$(demo7'),$('demo7'),$('emo8'),$('emo8'),$('demo9''demo9');
ORPLAP.INIT([$('demo1'),$('demo2'),$('demo3'),$('demo4'),$(demo5'),$('demo6'),$('demo7'),$('demo7'),$('demo8'),$('demo8'),$('demo9'));
};
</script>
</body>
</html>
代码如上,只是感觉效率有点低,小伙伴们有没有什么优化方案呢,还请告之,不胜感激