原生javascript实现DIV拖拽并计算重复面积


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Table</title>
</head>
<style type="text/css">
body{margin:0px; padding:0px; font-size:12px}
.div{height:160px;width:160px;position:absolute; text-align:center; }
.demo1{ border:1px solid #96C2F1;background-color:#EFF7FF;left:150px;top:20px}
.demo2{ border:1px solid #9BDF70;background-color:#F0FBEB;left:450px;top: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;left:750px;top:220px}
.demo7{ border:1px solid #ADCD3C;background-color:#F2FDDB;left:150px;top:420px}
.demo8{ border:1px solid #F8B3D0;background-color:#FFF5FA;left:450px;top:420px}
.demo9{ border:1px solid #D3D3D3;background-color:#F7F7F7;left:750px;top:420px}
.focus{background-color: #990000;}
</style>
<body >
<div>demo1</div>
<div>demo2</div>
<div>demo3</div>
<div>demo4</div>
<div>demo5</div>
<div>demo6</div>
<div>demo7</div>
<div>demo8</div>
<div>demo9</div>
<script language="javascript">
(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];
};

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxdyd.html