Le javascript natif implémente le glisser-déplacer DIV et le calcul des compétences de zones_javascript répétées

Copier le code Le code est le suivant :

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

(fonction(fenêtre,non défini){
window.Sys = fonction (ua){
    varb = {
        c'est-à-dire : /msie/.test(ua) && !/opera/.test(ua),
        opéra : /opera/.test(ua),
        safari : /webkit/.test(ua) && !/chrome/.test(ua),
        Firefox : /firefox/.test(ua),
        chrome : /chrome/.test(ua)
    },vMarque = "";
    pour (var i en b) {
        if (b[i]) { vMark = "safari" == i ? "version" : je; casser; >
    >
    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;  
    retourner b;
}(window.navigator.userAgent.toLowerCase());

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

fenêtre.$ = fonction(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 gestionnaires = element.events[e],type;
    si(fn){
        pour (tapez les gestionnaires)
            if(handlers[type]===fn){
                element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" e,fn);
                supprimer les gestionnaires[type];
            >
    }autre{
        pour(tapez les gestionnaires){
            element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" e,handlers[type]);
            supprimer les gestionnaires[type];
        >
    }       
};
window.setStyle = fonction(e,o){
    si(typeof o=="string")
        e.style.cssText=o;
    autre   
        pour(var i in o)
            e.style[i] = o[i];
};

var slice = Array.prototype.slice;
window.Bind = fonction (objet, amusant) {
    var args = slice.call(arguments).slice(2);
    return function() {
            return fun.apply(object, args);
    };
};
window.BindAsEventListener = function(objet, fun,args) {
    var args = slice.call(arguments).slice(2);
    fonction de retour (événement) {
        return fun.apply(object, [event || window.event].concat(args));
    >
};
//copie depuis jQ
window.extend = fonction(){
    var cible = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options;
    if ( typeof target === "boolean" ) {
        profond = cible ;
        cible = arguments[1] || {};
        je = 2;
    >
    if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
        cible = {};
    pour(;je         if ( (options = arguments[ i ]) != null )
            pour(nom de la variable dans les options){
                var src = cible[ nom ], copie = options[ nom ];
                si (cible === copie)
                    continuer ;
                if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
                    target[ nom ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
                }   
                sinon if(copie !== non défini)
                    cible[nom] = copie ;                       
            >
    >
    cible de retour ;           
};
//copie depuis jQ
window.each =  function ( objet, rappel, args ) {  
    nom du var, i = 0, longueur = objet.longueur ;  
    si ( arguments ) {
  args = Array.prototype.slice.call(arguments).slice(2);
        if ( longueur === non défini ) {  
            pour (nom dans l'objet)  
                if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false )  
                    casser;  
        } autre 
            pour ( ; je < longueur; je )  
                if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false )   //
                    casser;  
    } autre {     
        if ( longueur === non défini ) {  
            pour (nom dans l'objet)  
                if ( callback.call( object[ name ], name, object[ name ] ) === false )  
                    casser;  
        } autre 
            pour ( var valeur = objet[0];  
                je &Lt ; longueur && callback.call( valeur, i, valeur ) !== false; valeur = objet[ i] ){}  
    }  
    renvoyer l'objet ;  
} ;  
window.currentStyle = fonction (élément) {
    return element.currentStyle || document.defaultView.getComputedStyle(element, null);
};
window.objPos = fonction(elem){
    var gauche = 0, haut = 0, droite = 0, bas = 0,doc = elem ? elem.ownerDocument : document;
    if ( !elem.getBoundingClientRect || window.Sys.ie8 ) {
        var n = elem;
        while (n) { left = n.offsetLeft, top = n.offsetTop ; n = n.offsetParent ; };
        droite = gauche elem.offsetWidth ; bottom = top elem.offsetHeight;
    } autre {
        var rect = elem.getBoundingClientRect();
        gauche = droite = doc.documentElement.scrollLeft || doc.body.scrollLeft;
        haut = bas = doc.documentElement.scrollLeft || doc.body.scrollLeft;
        gauche = rect.gauche ; droite = rect.droite;
        top = rect.top ; bottom = rect.bottom;
    >
    return { "gauche" : gauche, "haut" : haut, "droite" : droite, "bas" : bas };       
};
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|$)'),' ' ));
>
})(fenêtre);

var Glisser = {
    elem    : nul,
    zindex  : 0,
    options : {},
    init    : function(){       
  chacun(arguments,fonction(i,elem,oThis){
    addListener(elem,'mousedown',BindAsEventListener(oThis,oThis.start,elem));
  }, ceci);
    },
    début : fonction(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);
    },
    déplacer  : fonction(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);
    },
    haut   : fonction(){
        removeListener(document,'mousemove');
        RemoveListener(document,'mouseup');
        Sys.ie&&this.elem.releaseCapture();
        this.options.callbackup&&this.options.callbackup(this.elem);
    >
};

var chevauchement = {
    auberge :{},                //所有需要计算重合的元素
    chevauchementList :{},           //已经重合的元素
    init : fonction (éléments) {
        chacun(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}};
        }, ceci);
    },
    setElem:fonction(elem){
        si(!elem)retour;
        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(mon){
        var obj= {}, my = this.hostel[my.getAttribute('overlap')];
       
        chacun(this.hostel,function(key,config,oThis){
            // 是元素本身 则返回
            if(config.elem === mon.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)
                revenir ;
            obj[config.elem.getAttribute('overlap')] = [config.elem,oThis.howOverlap(my,config)];
        }, ceci);
        retourner 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]) renvoie 0;
  
  si(arr.length====1||arr.length====2){
   var key = arr[0].split('-'),x1=ma[clé[0]].x,y1=ma[clé[0]].y,x2=autre[clé[1]].x ,y2=autre[clé[1]].y;
   return Math.abs((x1-x2)*(y1-y2));  
  } ;   
  //完全重合
  si(arr.length===4){
   renvoie 162*162 ; 
  } ;  
    },
 //看点是不是在另一个div中
    inclure : fonction (point, l, r, t, b, clé) {
  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});
 
    fonction up(elem){
        pour (var n dans chevauchement. chevauchementList)
            removeClass(overlap.overlapList[n][0],'focus')
          chevauchement.overlapList = {};
         Drag.elem.innerHTML =Drag.elem.id;
};

Fonction déplacer(elem){
          chevauchement.setElem(elem);
//p est utilisé pour déterminer si l'obj renvoyé est vide
        var obj = chevauchement.isOverlap(elem),name,p = function(o){
pour (nom en o)
                       return false ;
             return true ;
         }(obj);                                                                        
//S'il s'agit d'un objet vide, retournez et n'effectuez pas le parcours suivant
          si(p){
            up();
             revenir ;
        };
                             
         var str ='';                                           chevauchement.overlapList = obj;
         chacun(overlap.hostel,function(key,config){
Si(obj[clé]){
                    addClass(obj[key][0],'focus');
​  str = str 'La zone qui chevauche ' obj[key][0].id ' est :' obj[key][1] '
';
               }autre{
                  removeClass(config.elem,'focus');
            }
        });
         Drag.elem.innerHTML = str;
};
Drag.init($('demo1'),$('demo2'),$('demo3'),$('demo4'),$('demo5'),$('demo6'),$('demo7 '),$('démo8'),$('démo9'));
chevauchement.init([$('demo1'),$('demo2'),$('demo3'),$('demo4'),$('demo5'),$('demo6'),$(' démo7'),$('démo8'),$('démo9')]);
};

Le code est comme ci-dessus, mais je pense que l'efficacité est un peu faible. Avez-vous des plans d'optimisation, veuillez me le faire savoir. Merci beaucoup .