原生js实现拖拽与缩放等包含js设置样式与五子棋等

最近写五子棋，写着写着，写了几个js特效，感觉还行，发出来分享一下。具体还在调试，如果有alert弹窗部分，大家自己找一下取消掉。我记得缩放的四个边角红色背景色没有去掉，嫌碍事的可以把“background:red;”改为“background:transparent;”即可。有小瑕疵的话，有动手能力的可以自行调试改正。

A. 拖拽部分 ——– 《changer.js》：

var chger_Browser,chger_Stys;
// 判断浏览器
function chger_GetBrowser(){
   
    if(!!window.ActiveXObject || "ActiveXObject" in window){
        return "IE";
    }else{
        var t=window.navigator.userAgent;
        var a=["Opera","FireFox","Chrome","Safari"];
        for(var i=0;i<a.length;i++){
  if(t.indexOf(a[i])+1){
  return a[i];};};
    };  
};  /* INIT Borwser Name-------> */ chger_Browser=chger_GetBrowser();
//返回HTML元素对象
function chger_ReturnHtmlElm(o){
   
    var t=null;

    if(typeof(o)=="object"&&o.nodeType==1){
        return o;
    }else if(typeof(o)=="string"&&!!(t=document.getElementById(o))){
        return t;
    }else{
  return false;};
};

//绑定事件 与 stopBubble 等
function chger_AddEvents(o,e,f){
    o.attachEvent?o.attachEvent("on"+e,f):o.addEventListener(e,f); };
function chger_RemoveEvents(o,e,f){
    o.removeEventListener?o.removeEventListener(e,f):o.detachEvent("on"+e,f); };
function chger_StopEvents(e){
   e&&e.preventDefault?e.preventDefault():window.event.returnValue=false;}
function chger_StopBubble(e){
   e&&e.stopPropagation?e.stopPropagation():window.cancelBubble=true;};

//样式操作修改 和 获取
function chger_CssFunction(){
   
    function ieGet(o,a){
    return o.currentStyle[a]; };
    function imIeGet(o,a){
    return window.getComputedStyle(o,null)[a]; };

    this.get=("IE" == chger_Browser?ieGet:imIeGet);
    this.set=function(o,s){
   
        if(!o||!s|| typeof(s)!="string"){
  return false};     
        s=s.replace(/(\;$)|(^\;)/g,"").split(";");
        this.sty=[]; this.o=null;

        if(typeof(o.length)=="undefined"){ o=[o]; };
        for(var i=0;i<s.length;i++){
            this.sty.push([s[i].slice(0,s[i].indexOf(":")),s[i].slice(s[i].indexOf(":")+1,s[i].length)]);
        };
        for(var i=0;i<o.length;i++){
            this.o=chger_ReturnHtmlElm(o[i]);
            if(!!this.o){ for(var k=0;k<this.sty.length;k++){ this.o.style[this.sty[k][0]]=this.sty[k][1]; }; };
        };
    };
}; /* INIT cssFunction -------> */ chger_Stys=new chger_CssFunction();

// A 透明度改变
function chger_Opacity(o,v){
   
    if("IE" == chger_Browser){
        o.style.filter="alpha(Opacity:"+parseInt(v)+")";
    }else{o.style.opacity=parseInt(v*100)/100;};
};
// B 大小改变
function chger_Position(w,h){
   
    o.style.width=w+"px";
    o.style.height=h+"px";
};

// B-1 createElement
function chger_CretE(t,ids){
   
    var elm=document.createElement(t); elm.setAttribute("id",ids); return elm;
};

// C 移动
function chger_Mover(o,box,run,show,create){
   
    //【o】:一个移动对象（与chger_Drager配合使用） 【box】:对象的边框，移动不能超出这个边框 【run】:绑定一个运行对象，为一个function对象 【show】:设置true为移动边框，设置false为移动本体，无边框 【create】:无需理会，与new过程有关，外部调用不需要new语句。
    if(!chger_ReturnHtmlElm(o)){
  return null;};
    if(!create){
  return new chger_Mover(o,box,run,show,true);};

    this.objer={}; this.boxer={}; this.show=show;
    if(typeof(run)=="function"){ this.go=run; }else{
  this.go=false;};

    this.objer.elm=chger_ReturnHtmlElm(o); this.boxer.elm=chger_ReturnHtmlElm(box);
    if(!this.boxer.elm){
  this.boxer.elm=document.body;};
    if("static" == chger_Stys.get(this.boxer.elm,"position")){chger_Stys.set(this.boxer.elm,"position:relative;left:0;top:0;");};
    if("static" == chger_Stys.get(this.objer.elm,"position")){chger_Stys.set(this.objer.elm,"position:absolute;left:0;top:0;");};

    this.objer.width=this.objer.elm.offsetWidth; this.objer.height=this.objer.elm.offsetHeight;
    this.boxer.width=this.boxer.elm.offsetWidth; this.boxer.height=this.boxer.elm.offsetHeight;
    this.R=this.boxer.width-this.objer.width; this.B=this.boxer.height-this.objer.height;
    this.objer.zIndex=parseInt(chger_Stys.get(this.objer.elm,"z-index"));

    if(!!this.show){
        this.mover=chger_CretE("div","id"+new Date().getTime());
        this.objer.elm.parentNode.appendChild(this.mover);
        this.mover.style.position="absolute";
        this.mover.style.background="transparent";
        this.mover.style.width=chger_Stys.get(this.objer.elm,"width");
        this.mover.style.height=chger_Stys.get(this.objer.elm,"height");
        this.mover.style.left=chger_Stys.get(this.objer.elm,"left");
        this.mover.style.top=chger_Stys.get(this.objer.elm,"top");
    }else{
  this.mover=this.objer.elm;};

    this.X=this.objer.elm.offsetLeft; this.Y=this.objer.elm.offsetTop;
    this.Move=function(x,y){
   
        this.X=(x<0?0:(x>this.R?(this.R<0?0:this.R):x));
        this.Y=(y<0?0:(y>this.B?(this.B<0?0:this.B):y));
        this.mover.style.left=this.X+"px";
        this.mover.style.top=this.Y+"px";
        if(this.go){
  this.go(x,y);};
    };  
};

// D 拖拽
function chger_Drager(o,m,bd,create){
   
    //【o】:拖拽触发的对象，注意，不是指拖拽移动的对象 【m】:为一个移动对象，由chger_Mover对象new出来的 【bd】:设置true为不修改边框（不需激活，直接拖拽），为空或设置false为需要激活（激活时边框变为红色） 【create】:无需理会，与new过程有关，外部调用不需要new语句。
    if(!chger_ReturnHtmlElm(o)){
  return null;};
    if(!create){
  return new chger_Drager(o,m,bd,true);};

    if(!m||!m.objer||!m.objer.width){ this.oMove=chger_Mover(o,document.body); }else{
  this.oMove=m;};
    this.objer={}; this.bd=bd;
    this.objer.elm=chger_ReturnHtmlElm(o);
    this.objer.bdwidth=chger_Stys.get(this.objer.elm,"border-width").toString();
    this.objer.bdstyle=chger_Stys.get(this.objer.elm,"border-style");
    this.objer.bdcolor=chger_Stys.get(this.objer.elm,"border-color");
    if(this.objer.bdstyle=="none"){
  this.objer.bdstyle="solid";};
    if(this.objer.bdwidth.search(/[0-9]{
  1,3}px/)){ this.objer.bdwidth="0px"; };
    if("0px"==this.objer.bdwidth && this.bd){
  this.objer.bdwidth="1px";};

    this.closeTim=function(){
   
        if(this.moving){
            chger_RemoveEvents(document,"mousemove",this.mousemove.bind(this));
            chger_RemoveEvents(document,"mouseup",this.mouseup.bind(this));
            this.moving=false;
        };
        this.objer.elm.style.borderWidth=this.objer.bdwidth;
        this.objer.elm.style.borderColor=this.objer.bdcolor;
        this.objer.elm.style.borderStyle=this.objer.bdstyle;
        if(this.bd)this.ready=false;
    };this.closeTim();
    this.press=this.objer.elm.offsetWidth-this.oMove.objer.width;
    this.oMove.R -= this.press; this.oMove.B -= this.press;
    if(!!this.oMove.show){
        this.oMove.mover.style.borderWidth=this.objer.bdwidth;
        this.oMove.mover.style.borderColor=this.objer.bdcolor;
        this.oMove.mover.style.borderStyle=this.objer.bdstyle;
    };

    this.choose=function(e){
   
        chger_StopEvents(e);chger_StopBubble(e);
        if(!this.bd){
  return false;};
        if(!this.ready){
            chger_AddEvents(this.objer.elm,"mousedown",this.mousedown.bind(this));
            this.ready=true;
            this.objer.elm.style.borderWidth=this.objer.bdwidth;
            this.objer.elm.style.borderColor="red";
            this.objer.elm.style.borderStyle=this.objer.bdstyle;
            this.timer=setTimeout(this.closeTim.bind(this),5000);
        }else{
            chger_RemoveEvents(this.objer.elm,"mousedown",this.mousedown.bind(this));
            this.ready=false; this.closeTim();
        };
    };
    this.mousedown=function(e){
   
        chger_StopEvents(e);chger_StopBubble(e);
        if(this.ready){
            this.CX=e.clientX-this.oMove.objer.elm.offsetLeft; this.CY=e.clientY-this.oMove.objer.elm.offsetTop;
            chger_AddEvents(document,"mousemove",this.mousemove.bind(this));
            chger_AddEvents(document,"mouseup",this.mouseup.bind(this));
            this.moving=true;
            if(this.timer){ clearInterval(this.timer); };
            if(!!this.oMove.show){
  this.oMove.mover.style.zIndex=this.oMove.objer.zIndex+1;};
        };
    };
    this.mouseup=function(e){
   
        chger_StopEvents(e);chger_StopBubble(e);
        if(this.moving){
            chger_RemoveEvents(document,"mousemove",this.mousemove.bind(this));
            chger_RemoveEvents(document,"mouseup",this.mouseup.bind(this));
            this.moving=false;
            if(this.bd){ this.timer=setTimeout(this.closeTim.bind(this),5000); };
            if(!!this.oMove.show){
                this.oMove.objer.elm.style.left=this.oMove.X+"px";
                this.oMove.objer.elm.style.top=this.oMove.Y+"px";
                this.oMove.mover.style.zIndex=this.oMove.objer.zIndex-1;
            };
        };
    };
    this.mousemove=function(e){
   
        chger_StopEvents(e);chger_StopBubble(e);
        if(this.moving){
            this.oMove.Move(e.clientX-this.CX,e.clientY-this.CY);
        };
    };

    if("absolute" != chger_Stys.get(this.objer.elm,"position")){
  return false;};
    if(!this.bd){
        chger_AddEvents(this.objer.elm,"mousedown",this.mousedown.bind(this));
        this.ready=true;
    }else{
        chger_AddEvents(this.objer.elm,"dblclick",this.choose.bind(this));
    };
};

// E 缩放
function chger_Resizer(o,create){
   
    //【o】:拖拽触发的对象，注意，不是指拖拽移动的对象 【m】:为一个移动对象，由chger_Mover对象new出来的 【bd】:设置true为不修改边框（不需激活，直接拖拽），为空或设置false为需要激活（激活时边框变为红色） 【create】:无需理会，与new过程有关，外部调用不需要new语句。
    if(!chger_ReturnHtmlElm(o)){
  return null;};
    if(!create){
  return new chger_Resizer(o,true);};
    this.objer={};
    this.objer.elm=chger_ReturnHtmlElm(o);
    this.objer.width=this.objer.elm.offsetWidth; this.objer.height=this.objer.elm.offsetHeight;
    this.objer.left=this.objer.elm.offsetLeft; this.objer.top=this.objer.elm.offsetTop;
    this.X=this.objer.left; this.Y=this.objer.top;
    this.W=this.objer.width; this.H=this.objer.height;
    this.Directer=[true,true,true,true];
    this.D=[]; this.I=[]; this.type=false;
    this.TL=false; this.TR=false; this.BL=false; this.BR=false;
    this.objer.elm.style.overflow="hidden";
    this.resize=function(X,Y){
   
        this.W=this.CW+X*this.D[2]; this.H=this.CH+Y*this.D[3];
        if(this.W<20){
  this.W=20;}else{
  this.X=this.CX+X*this.D[0];};
        if(this.H<20){
  this.H=20;}else{
  this.Y=this.CY+Y*this.D[1];};
        if(this.position){
            this.objer.elm.style.left=this.X+"px"; this.objer.elm.style.top=this.Y+"px";
        };
        this.objer.elm.style.width=this.W+"px";
        this.objer.elm.style.height=this.H+"px";
        if(1 == this.type){};
    };
    this.mousedown=function(e){
   
        chger_StopEvents(e);chger_StopBubble(e);
        if(!this.type){
  return false;};
        this.CW=this.W; this.CH=this.H;
        this.CX=this.objer.elm.offsetLeft; this.CY=this.objer.elm.offsetTop;
        this.RX=e.clientX; this.RY=e.clientY;
        //this.CX=this.RX-this.X; this.CY=this.RY-this.Y;
        chger_AddEvents(document,"mousemove",this.mousemove.bind(this));
        chger_AddEvents(document,"mouseup",this.mouseup.bind(this));
        this.moving=true;
    };
    this.mousemove=function(e){
   
        chger_StopEvents(e);chger_StopBubble(e);
        if(!this.moving){
  return false;};
        this.resize(e.clientX-this.RX,e.clientY-this.RY);
    };
    this.mouseup=function(e){
   
        chger_StopEvents(e);chger_StopBubble(e);
        if(this.type){
            chger_RemoveEvents(document,"mousemove",this.mousemove.bind(this));
            chger_RemoveEvents(document,"mouseup",this.mouseup.bind(this));
            this.type=false; this.moving=false; this.D=[0,0];
        };
    };
    for(var