Drag.js
functionDrag (ID) {var_this = This; This. DISX = 0; This. Disy = 0; This. Odiv =document.getElementById (ID); This. Odiv.onmousedown =function(EV) {_this.fndown (EV); };} Drag.prototype.fnDown=function(EV) {var_this = This; varOevent = ev| |event; //mouse distance minus object position This. DISX = oevent.clientx- This. Odiv.offsetleft; This. Disy = oevent.clienty- This. Odiv.offsettop; Document.onmousemove=function(EV) {_this.fnmove (EV); }; Document.onmouseup=function() {_this.fnup (); };};D Rag.prototype.fnMove=function(EV) {//restrict the scope to add here varOevent = ev| |event; This. ODiv.style.left = oevent.clientx- This. disx+ ' px '; This. ODiv.style.top = oevent.clienty- This. disy+ ' px ';};D Rag.prototype.fnUp=function() {Document.onmousemove=NULL; Document.onmouseup=NULL;}
Limitdrag.js
functionLimitdrag (ID) {//masquerading with constructors, inheriting propertiesDrag.call ( This, id);}//using the prototype chain to inherit the method for(varIinchDrag.prototype) {Limitdrag.prototype[i]=drag.prototype[i];} LimitDrag.prototype.fnMove=function(EV) {//the method of covering the drag.js. varOevent = ev| |event; varL = oevent.clientx- This. Disx; vart = oevent.clienty- This. Disy; if(l<0) {L=0; }Else if(l>document.documentelement.clientwidth- This. Odiv.offsetwidth) {L=document.documentelement.clientwidth- This. Odiv.offsetwidth; } if(t<0) {T=0; }Else if(t>document.documentelement.clientheight- This. Odiv.offsetheight) {T=document.documentelement.clientheight- This. Odiv.offsetheight; } This. ODiv.style.left =l + ' px '; This. oDiv.style.top = t+ ' px ';}
Html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title></title> <style>#div1{width:100px;Height:100px;Background-color:Green;position:Absolute; Left:0;Top:0;}#div2{width:100px;Height:100px;Background-color:Red;position:Absolute; Right:0;Top:0;} </style></Head><Body><DivID= "Div1"></Div><DivID= "Div2"></Div></Body></HTML><Scripttype= "Text/javascript"src= "Drag.js"></Script><Scripttype= "Text/javascript"src= "Limitdrag.js"></Script><Scripttype= "Text/javascript">window.onload= function () { NewDrag ("Div1"); NewLimitdrag ("Div2"); }</Script>
Inheritance Case _ drag and drop of restricted range
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
