JS Component Development Process

HTML code

<id= "Div1"></div><  ID = "Div2" ></ Div > <  ID= "Div3"></div>

CSS Styles

#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 Code

<script>window.onload=function(){    varodiv1=NewDrag (); Odiv1.init ({ID:' Div1 '    }); varOdiv2=NewDrag (); Odiv2.init ({ID:' Div2 ', FD:function() {Document.title= "HI"    }    }); varodiv3=NewDrag (); Odiv3.init ({ID:' Div3 ', FD:function() {Document.title= ' Jerry '}, FU:function() {Document.title= ' Byebye '    }    });} functionDrag () { 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) {varEv=ev | |window.event;        _this.fndown (EV);        _THIS.SETTINGS.FD (); Document.onmousemove=function(EV) {varEv=ev | |window.event;        _this.fnmove (EV); } document.onmouseup=function() {_this.fnup ();        _this.settings.fu (); }        return false; }}drag.prototype.fndown=function(EV) {varEv=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;}functionExtend (obj1,obj2) { for(varIinchobj2) {Obj1[i]=Obj2[i]; }}</script>

JS Component Development Process