js组件开发流程

html代码

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

 

css样式

#div1{

    width: 100px;

    height: 100px;

    background: red;

    cursor: move;

    position:absolute;

    left:0;

    top: 0;

}

#div2{

    width: 100px;

    height: 100px;

    background: black;

    cursor: move;

    position:absolute;

    left:100px;

    top: 0;

}

#div3{

    width: 100px;

    height: 100px;

    background: blue;

    cursor: move;

    position:absolute;

    left:200px;

    top: 0;

}

 

js代码

<script>

window.onload=function(){

    var oDiv1=new Drag();

    oDiv1.init({

        id:'div1'

    });



    var oDiv2=new Drag();

    oDiv2.init({

        id:'div2',

        fD:function(){

        document.title="hi"

    }

    });



    var oDiv3=new Drag();

    oDiv3.init({

        id:'div3',

        fD:function(){

        document.title='jerry'

    },

        fU:function(){

        document.title='byebye'

    }

    });

}

    function Drag(){

        this.oDiv=null;

        this.disX=0;

        this.disY=0;



        this.settings={

            fD:function(){},

            fU:function(){}

        }

    }



Drag.prototype.init=function(opt){

    var _this=this;

    

    

    extend(this.settings,opt);



    this.oDiv=document.getElementById(opt.id);

    this.oDiv.onmousedown=function(ev){

        var ev=ev || window.event;

        _this.fnDown(ev);

        _this.settings.fD();



        document.onmousemove=function(ev){

            var ev=ev || window.event;

            _this.fnMove(ev);

        }

        document.onmouseup=function(){

            _this.fnUp();

            _this.settings.fU();

        }



        return false;

    }

}

Drag.prototype.fnDown=function(ev){

    var ev=ev || window.event;

    this.disX=ev.clientX-this.oDiv.offsetLeft;

    this.disY=ev.clientY-this.oDiv.offsetTop;

}

Drag.prototype.fnMove=function(ev){

    this.oDiv.style.left=ev.clientX-this.disX+'px';

    this.oDiv.style.top=ev.clientY-this.disY+'px';

}

Drag.prototype.fnUp=function(){

    document.onmousedown=null;

    document.onmousemove=null;

}



function extend(obj1,obj2){

    for (var i in obj2){

        obj1[i]=obj2[i];

    }

}

</script>