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>