懂视1
懂视101
懂视201
懂视301
懂视401
懂视501
懂视601
懂视701
懂视801
懂视901
懂视1001
懂视1101
懂视1201
懂视1301
懂视1401
懂视1501
懂视1601
懂视1701
懂视1801
懂视1901
文库1
文库101
文库201
文库301
文库401
文库501
文库601
文库701
文库801
文库901
文库1001
文库1101
文库1201
文库1301
文库1401
文库1501
文库1601
文库1701
文库1801
文库1901
55游戏网
全部频道
首页
科技
教育
生活
旅游
时尚
美容
美食
健康
体育
游戏
汽车
家电
您的当前位置:
首页
判断可拖动div是否重合重合多少_javascript技巧
判断可拖动div是否重合重合多少_javascript技巧
来源:55游戏网
Table
demo1 demo2 demo3 demo4 demo5 demo6 demo7 demo8 demo9 (function(window,undefined){ window.Sys = function (ua){ var b = { ie: /msie/.test(ua) && !/opera/.test(ua), opera: /opera/.test(ua), safari: /webkit/.test(ua) && !/chrome/.test(ua), firefox: /firefox/.test(ua), chrome: /chrome/.test(ua) },vMark = ""; for (var i in b) { if (b[i]) { vMark = "safari" == i ? "version" : i; break; } } 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; return b; }(window.navigator.userAgent.toLowerCase()); window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true); window.$ = function(Id){ return 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" + e,fn); }; window.addListener.guid = 1; window.removeListener = function(element,e,fn){ var handlers = element.events[e],type; if(fn){ for(type in handlers) if(handlers[type]===fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn); delete handlers[type]; } }else{ for(type in handlers){ element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" + e,handlers[type]); delete handlers[type]; } } }; window.setStyle = function(e,o){ if(typeof o=="string") e.style.cssText=o; else 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)); } }; //copy from jQ window.extend = function(){ var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options; if ( typeof target === "boolean" ) { deep = target; target = arguments[1] || {}; i = 2; } if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]") target = {}; for(;i
=config.leftBottomDot.y||my.rightTopDot.x<=config.leftTopDot.x||my.leftTopDot.x>=config.rightTopDot.x) return; obj[config.elem.getAttribute('overlap')] =[config.elem,oThis.howOverlap(my,config)]; },this); return 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){ return 162*162; }; }, //看点是不是在另一个div中 include : 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(){ extend(Drag.options,{callbackmove:move,callbackup:up}); function up(elem){ for(var n in overlap.overlapList) removeClass(overlap.overlapList[n][0],'focus') overlap.overlapList = {}; Drag.elem.innerHTML =Drag.elem.id; }; function move(elem){ overlap.setElem(elem); //p为判断返回的obj是不是空的 var obj = overlap.isOverlap(elem),name,p = function(o){ for (name in o) return false; return true; }(obj); //如果是个空对象 则返回 不进行下面的遍历 if(p){ up(); return; }; var str =''; overlap.overlapList = obj; each(overlap.hostel,function(key,config){ if(obj[key]){ addClass(obj[key][0],'focus'); str = str +'与'+obj[key][0].id+'重合的面积为:'+obj[key][1]+''; }else{ 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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
显示全文