네이티브 자바스크립트는 DIV 끌기 및 반복된 Area_javascript 기술 계산을 구현합니다.

코드 복사 코드는 다음과 같습니다.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

demo1

demo2

demo3

demo4

demo5

demo6

demo7

demo8

demo9

<스크립트 언어="javascript">
(함수(창,정의되지 않음){
window.Sys = 함수(ua){
    변수 b = {
        예: /msie/.test(ua) && !/opera/.test(ua),
        오페라: /opera/.test(ua),
        사파리: /webkit/.test(ua) && !/chrome/.test(ua),
        파이어폭스: /firefox/.test(ua),
        크롬: /chrome/.test(ua)
    },vMark = "";
    for (var i in b) {
        if (b[i]) { vMark = "사파리" == i ? "버전" : 나; 부서지다; }
    }
    b.version = vMark && RegExp("(?:" vMark ")[\/: ]([\d.] )").test(ua) ? RegExp.$1 : "0";
    b.ie6 = b.ie && parsInt(b.version, 10) == 6;
    b.ie7 = b.ie && parsInt(b.version, 10) == 7;
    b.ie8 = b.ie && parsInt(b.version, 10) == 8;  
    b를 돌려주세요;
}(window.navigator.userAgent.toLowerCase());

window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true);

window.$ = 함수(ID){
    return document.getElementById(Id);
};
window.addListener = 함수(요소,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 = 함수(요소,e,fn){
    var handlers = element.events[e],type;
    if(fn){
        for(핸들러 입력)
            if(핸들러[유형]===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 = 함수(e,o){
    if(typeof o=="string")
        e.style.cssText=o;
    그 외   
        for(var i in o)
            e.style[i] = o[i];
};

var 슬라이스 = Array.prototype.slice;
window.Bind = 함수(객체, 재미) {
    var args = Slice.call(arguments).slice(2);
    반환 함수() {
            return fun.apply(object, args);
    };
};
window.BindAsEventListener = function(object, fun,args) {
    var args = Slice.call(arguments).slice(2);
    반환함수(이벤트) {
        return fun.apply(object, [event || window.event].concat(args));
    }
};
//jQ에서 복사
window.extend = 함수(){
    var 대상 = 인수[0] || {}, i = 1, 길이 = 인수.길이, 깊이 = true, 옵션;
    if ( typeof target === "boolean" ) {
        깊은 = 목표;
        대상 = 인수[1] || {};
        나는 = 2;
    }
    if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
        대상 = {};
    for(;i         if ( (옵션 = 인수[ i ]) != null )
            for(옵션의 변수 이름){
                var src = 대상[ 이름 ], copy = 옵션[ 이름 ];
                if ( 대상 === 복사 )
                    계속;
                if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
                    target[ 이름 ] = 인수.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
                }   
                else if(복사 !== 정의되지 않음)
                    대상[이름] = 복사;                       
            }
    }
    반환 대상;           
};
//jQ에서 복사
window.each =  함수(객체, 콜백, 인수) {  
    var 이름, i = 0, 길이 = object.length;  
    if (args) {
  args = Array.prototype.slice.call(arguments).slice(2);
        if ( 길이 === 정의되지 않음 ) {  
            for ( 개체의 이름 )  
                if ( callback.apply( object[ 이름 ],[name,object[ 이름 ]].concat(args) ) === false )  
                    부서지다;  
        } 그 외 
            for ( ; i                 if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false )   //
                    부서지다;  
    } else {     
        if ( 길이 === 정의되지 않음 ) {  
            for ( 개체의 이름 )  
                if ( callback.call( 객체[ 이름 ], 이름, 객체[ 이름 ] ) === false )  
                    부서지다;  
        } 그 외 
            for ( var value = object[0];  
                나는 < length && callback.call( value, i, value ) !== false; 값 = 객체[ i] ){}  
    }  
    반환 개체;  
};  
window.currentStyle = 함수(요소){
    return element.currentStyle || document.defaultView.getCompulatedStyle(요소, null);
};
window.objPos = 함수(요소){
    var 왼쪽 = 0, 위쪽 = 0, 오른쪽 = 0, 아래쪽 = 0,doc = elem ? elem.ownerDocument : 문서;
    if ( !elem.getBoundingClientRect || window.Sys.ie8 ) {
        var n = 요소;
        while (n) { 왼쪽 = n.offsetLeft, 위쪽 = n.offsetTop; n = n.offsetParent; };
        오른쪽 = 왼쪽 elem.offsetWidth; 하단 = 상단 elem.offsetHeight;
    } 그 밖의 {
        var ret = elem.getBoundingClientRect();
        왼쪽 = 오른쪽 = doc.documentElement.scrollLeft || doc.body.scrollLeft;
        상단 = 하단 = doc.documentElement.scrollLeft || doc.body.scrollLeft;
        왼쪽 = 직사각형.왼쪽; 오른쪽 = 직사각형.오른쪽;
        상단 = ret.top; 하단 = ret.bottom;
    }
    return { "왼쪽": 왼쪽, "위쪽": 위쪽, "오른쪽": 오른쪽, "아래쪽": 아래쪽 };       
};
window.hasClass = 함수(요소, 클래스이름){
    return element.className.match(new RegExp('(\s|^)' className '(\s|$)'));
};
window.addClass = 함수(요소, 클래스이름){
    !window.hasClass(element, className)&&(element.className = " " className);
};
window.removeClass = 함수(요소, 클래스이름){
    window.hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\s|^)' className '(\s|$)'),' ' ));
}
})(창);

var 드래그 = {
    elem    : null,
    zindex  : 0,
    옵션: {},
    초기화    : 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(document,"mousemove",BindAsEventListener(this,this.move));
        addListener(document,"mouseup",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);
    },
    위로   : 함수(){
        RemoveListener(document,'mousemove');
        RemoveListener(document,'mouseup');
        Sys.ie&&this.elem.releaseCapture();
        this.options.callbackup&&this.options.callbackup(this.elem);
    }
};

varoverlap = {
    호스텔 :{},                //所有需要计算算算素素
    overlapList :{},           //已经합동적 자원
    초기화: 함수(요소){
        각(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:함수(요소){
        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 : 함수(내){
        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.rightTopDot.x)
                반품;
            obj[config.elem.getAttribute('overlap')] = [config.elem,oThis.howOverlap(my,config)];
        },이것);
        obj 반환;
    },
 //判断중합면
    HowOverlap : 함수(나의,기타){
        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]) 0을 반환합니다.
  
  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=기타[키[1]].y;
   return Math.abs((x1-x2)*(y1-y2));  
  };   
  //전체합체
  if(arr.length===4){
   162*162를 반환합니다. 
  };  
    },
 //看点是不是현재另一个div中
    include : 함수(점,l,r,t,b,키){
  return (dot.x>=l&&dot.x<=r&&dot.y>=t&&dot.y<=b)?key:false;
    }
};
window.onload = 함수(){
    확장(Drag.options,{callbackmove:move,callbackup:up});
 
    기능 업(elem){
        for(var n inoverlap.overlapList)
            RemoveClass(overlap.overlapList[n][0],'초점')
         overlap.overlapList = {};
         Drag.elem.innerHTML =Drag.elem.id;
};

함수 이동(elem){
         overlap.setElem(elem);
//p는 반환된 obj가 비어 있는지 확인하는 데 사용됩니다.
        var obj =overlap.isOverlap(elem),name,p = function(o){
(o에 이름)
                      false를 반환합니다.
             true를 반환합니다.
         }(obj);                                                                     
//빈 객체라면 반환하고 다음 순회를 수행하지 않음
          if(p){
            위로();
             반품;
        };
                             
         var str ='';                                         overlap.overlapList = obj;
         각각(overlap.hostel,function(key,config){
If(obj[키]){
                    addClass(obj[key][0],'focus');
​  str = str ' ' obj[key][0].id '와 겹치는 영역은 다음과 같습니다.' obj[key][1] '
';
               }그밖에{
                  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'),$(' 데모7'),$('demo8'),$('demo9')]);
};