复制代码代码如下:
<!doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title>表</title>
</head>
<style type = "text/css">
ボディ{マージン:0px;パディング:0px;フォントサイズ:12px}
.div {height:160px; width:160px; position:absolute;テキストアライグ:センター; }
.demo1 {border:1px solid#96c2f1; background-color:#eff7ff;左:150px;トップ:20px}
.demo2 {border:1px solid#9bdf70; background-color:#f0fbeb;左:450px;トップ:20px}
.demo3 {border:1px solid#bbe1f1; background-color:#eefaff; left:750px; top:20px}
.demo4 {border:1px solid#96c2f1; background-color:#eefaff; left:150px; top:220px}
.demo5 {border:1px solid#ffcc00; background-color:#fffff7; left:450px; top:220px}
.demo6 {border:1px solid#e3e197; background-color:#ffffdd;左:750px;トップ:220px}
.demo7 {border:1px solid#adcd3c; background-color:#f2fddb; left:150px; top:420px}
.demo8 {border:1px solid#f8b3d0; background-color:#fff5fa;左:450px;トップ:420px}
.demo9 {border:1px solid#d3d3d3; background-color:#f7f7f7; left:750px; top:420px}
.focus {background-color:#990000;}
</style>
<body>
<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(uua)&&!/pera/.test(ua)、
Opera:/pera/.test(uua)、
safari:/webkit/.test(uua)&&!/chrome/.test(ua)、
firefox:/firefox/.test(uua)、
Chrome: /chrome/.test(uua)
}、vmark = "";
for(b in bin){
if(b [i]){vmark = "safari" == i? 「バージョン」:i;壊す; }
}
b.version = vmark && regexp( "(?:" + vmark + ")[///:]([/d。] +)")。test(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);
window。$ = function(id){
document.getElementByID(ID)を返します。
};
window.addlistener = function(element、e、fn){
!element.events &&(element.events = {});
Element.Events [e] &&(element.events [e] [addlistener.guid ++] = fn)||(ement.events [e] = {'0':fn});
element.addeventlistener?element.addeventlistener(e、fn、false):element.attachevent( "on" + e、fn);
};
window.addlistener.guid = 1;
window.removelistener = function(element、e、fn){
var handlers = element.events [e]、type;
if(fn){
for(ハンドラーを入力)
if(handlers [type] === fn){
element.RemoveEventListener?element.RemoveEventListener(e、fn、false):element.detachevent( "on" + e、fn);
ハンドラーを削除[タイプ];
}
}それ以外{
for(タイプインハンドラー){
element.RemoveEventListener?element.RemoveEventListener(e、handlers [type]、false):element.detachevent( "on" + e、handlers [type]);
ハンドラーを削除[タイプ];
}
}
};
window.setStyle = function(e、o){
if(typeof o == "string")
e.style.csstext = o;
それ以外
for(var i in o)
e.Style [i] = o [i];
};
var slice = array.prototype.slice;
window.bind = function(object、fun){
var args = slice.call(arguments).slice(2);
return function(){
return fun.apply(object、args);
};
};
window.bindaseventlistener = function(object、fun、args){
var args = slice.call(arguments).slice(2);
return function(event){
return fun.apply(object、[event || window.event] .concat(args));
}
};
// JQからコピーします
window.extend = function(){
var target = arguments [0] || {}、i = 1、length = arguments.length、deep = true、options;
if(typeof target === "boolean"){
deep =ターゲット;
ターゲット=引数[1] || {};
i = 2;
}
if(typeof target!== "object" && object.prototype.tostring.call(ターゲット)!= "[オブジェクト関数]")
ターゲット= {};
for(; i <length; i ++){
if((options = arguments [i])!= null)
for(optionsのvar名){
var src =ターゲット[name]、copy = options [name];
if(ターゲット===コピー)
続く;
if(deep && copy && typeof copy === "object" &&!copy.nodetype){
ターゲット[name] = arguments.callee(deep、src ||(copy.length!= null?[]:{})、copy);
}
else if(copy!== undefined)
ターゲット[name] = copy;
}
}
ターゲットを返します。
};
// JQからコピーします
window.each = function(object、callback、args){
var name、i = 0、length = object.length;
if(args){
args = array.prototype.slice.call(arguments).slice(2);
if(length === undefined){
for(オブジェクトの名前)
if(callback.apply(object [name]、[name、object [name]]。concat(args))=== false)
壊す;
} それ以外
for(; i <length; i ++)
if(callback.apply(object [i]、[i、object [i]]。concat(args))=== false)//
壊す;
} それ以外 {
if(length === undefined){
for(オブジェクトの名前)
if(callback.call(object [name]、name、object [name])=== false)
壊す;
} それ以外
for(var value = object [0];
i <length && callback.call(value、i、value)!== false; value = object [++ i]){}
}
オブジェクトを返します。
};
window.currentStyle = function(element){
return element.currentstyle || document.defaultview.getComputedStyle(element、null);
};
window.objpos = function(elem){
var left = 0、top = 0、右= 0、bottom = 0、doc = elem? Elem.Owndocument:document;
if(!elem.getBoundingClientRect || window.sys.ie8){
var n = elem;
while(n){left += n.offsetLeft、top += n.offsettop; n = n.offsetparent; };
右=左 + elem.offsetwidth; bottom = 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; bottom += rect.bottom;
}
return {"left":left、 "top":top、 "right":right、 "bottom":bottom};
};
window.hasclass = function(element、classname){
return element.classname.match(new regexp( '(// s |^)'+className+'(// s | $)'));
};
window.addclass = function(element、className){
!window.hasclass(element、classname)&&(element.classname += "" +className);
};
window.removeclass = function(element、className){
window.hasclass(element、classname)&&(element.classname = element.classname.replace(new regexp( '(// s |^)'+className+'(// s | $)')、 ''));
}
})(ウィンドウ);
var drag = {
エレム:ヌル、
Zindex:0、
オプション:{}、
init:function(){
それぞれ(引数、関数(i、elem、othis){
addListener(Elem、 'Mousedown'、BindaseventListener(othis、othis.start、elem));
}、これ);
}、
start:function(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(document、 "mousemove"、bindaseventlistener(this、this.move));
addListener(document、 "mouseup"、bind(this、this.up));
this.options.callbackmove && this.options.callbackmove(this.elem);
}、
移動:function(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);
}、
up:function(){
Removelistener(document、 'mousemove');
Removelistener(document、 'mouseup');
sys.ie && this.elem.releasecapture();
this.options.callbackup && this.options.callbackup(this.elem);
}
};
var overlap = {
ホステル:{}、//所有需要计算重合的元素
オーバーラップリスト:{}、//已经重合的元素
init:function(elems){
それぞれ(elems、function(i、elem、othis){
elem.setattribute( 'overlap'、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:{x:r、y:b}};
}、これ);
}、
setelem:function(elem){
if(!elem)return;
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:l、y:b}、righttopdot:{x:r、y:t}、rightbottomdot:{x:r、y:b}};
}、
//判断是否重合
isoverlap:function(my){
var obj = {}、my = this.hostel [my.getattribute( 'overlap')];
それぞれ(this.hostel、function(key、config、othis){
//是元素本身是元素本身
if(config.elem === my.elem)return;
//判断2个div是否重合是否重合如果不重合
if(my.leftbottomdot.y <= config.lefttopdot.y || my.lefttopdot.y> = config.leftbottomdot.y || my.righttopdot.x <= config.lefttopdot.x || my.lefttopdot.x> = config.righttdot.x)
戻る;
obj [config.elem.getattribute( 'overlap')] = [config.elem、othis.howoverlap(my、config)];
}、これ);
OBJを返します。
}、
//判断重合面积
howoverlap:function(my、other){
var l = other.leftbottomdot.x、r = other.righttopdot.x、t = other.lefttopdot.y、b = other.leftbottomdot.y、arr = []、
lt = this.include(my.lefttopdot、l、r、t、b、 'lefttopdot-rightbottomdot')、
lb = this.include(my.leftbottomdot、l、r、t、b、 'leftbottomdot-righttopdot')、
rt = this.include(my.righttopdot、l、r、t、b、 'righttopdot-leftbottomdot')、
rb = this.include(my.rightbottomdot、l、r、t、b、 'rightbottomdot-lefttopdot');
lt && arr.push(lt)|| lb && arr.push(lb)|| rt && arr.push(rt)|| rb && arr.push(rb);
if(!arr [0])return 0;
//一个点一个点2个点都在其中个点都在其中
if(arr.length === 1 || arr.length === 2){
var key = arr [0] .split( ' - ')、x1 = my [key [0]]。x、y1 = my [key [0]]。y、x2 = other [key [1]]。x、y2 = other [key [1]]。y;
return math.abs((x1-x2)*(y1-y2));
};
//完全重合
if(arr.length === 4){
162*162を返します。
};
}、
//看点是不是在另一个div中
含める:function(dot、l、r、t、b、key){
return(dot.x> = l && dot.x <= r && dot.y> = t && dot.y <= b)?key:false;
}
};
window.onload = function(){
拡張(drag.options、{callbackmove:move、callbackup:up});
function up(elem){
for
Removeclass(overlap.Overlaplist [n] [0]、 'focus')
overlap.overlaplist = {};
drag.elem.innerhtml = drag.elem.id;
};
関数移動(ELEM){
overlap.setelem(elem);
// p为判断返回的obj是不是空的
var obj = overlap.isoverlap(elem)、name、p = function(o){
for(oの名前)
falseを返します。
trueを返します。
}(obj);
//如果是个空对象如果是个空对象则返回
if(p){
上();
戻る;
};
var str = '';
overlap.overlaplist = obj;
それぞれ(overlap.hostel、function(key、config){
if(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')、$( 'demo6')、$( 'demo7')、$( 'demo8')、$( 'demo9'));
overlap.init([$( 'demo1')、$( 'demo2')、$( 'demo3')、$( 'demo4')、$( 'demo5')、$( 'demo6')、$( 'demo7')、$( 'demo8')、$( 'demo9')]);
};
</script>
</body>
</html>
代码如上、只是感觉效率有点低、小伙伴们有没有什么优化方案呢、还请告之、不胜感激