Drag.js
//JavaScript Document//b DevelopmentDefine (function (require,exports,module) {function drag (obj) {varDISX =0; varDisy =0; Obj.onmousedown=function (EV) {varEV = EV | | Window.Event; DISX= Ev.clientx-Obj.offsetleft; Disy= Ev.clienty-Obj.offsettop; Document.onmousemove=function (EV) {varEV = EV | | Window.Event; varL = Ev.clientx-Disx; varT = Ev.clienty-Disy; //L = require ('./range.js '). Range (L, document.documentelement.clientwidth-obj.offsetwidth, 0); //t = require ('./range.js '). Range (T, document.documentelement.clientheight-obj.offsetheight, 0);Obj.style.left= L +'px'; Obj.style.top= T +'px'; }; Document.onmouseup=function () {Document.onmousemove=NULL; Document.onmouseup=NULL; }; return false; }; } Exports.drag=drag; });
Main.js
//JavaScript Document//a developmentDefine (function (require,exports,module) {varOinput = document.getElementById ('INPUT1'); varODiv1 = document.getElementById ('Div1'); varODiv2 = document.getElementById ('Div2'); varODiv3 = document.getElementById ('Div3'); Require ('./drag.js'). Drag (ODiv3); Oinput.onclick=function () {ODiv1.style.display='Block'; Require ('./scale.js'). scale (ODIV1,ODIV2); }; });
Range.js
// JavaScript Document Define (function (require,exports,module) { function range (val, max, min) { if(val > Max) { return max; } Else if (Val < min) { return min; } Else { return val; } } = range; });
Scale.js
//JavaScript Document//C DevelopmentDefine (function (Require,exports,module) {function scale (OBJ1,OBJ2) {varDownx =0; varDownY =0; varDOWNW =0; varDOWNH =0; Obj2.onmousedown=function (EV) {varEV = EV | | Window.Event; Downx=Ev.clientx; DownY=Ev.clienty; DOWNW=Obj1.offsetwidth; Downh=Obj1.offsetheight; Document.onmousemove=function (EV) {varEV = EV | | Window.Event; varW = Ev.clientx-downx +DOWNW; varH = Ev.clienty-downy +Downh; W= Require ('./range.js'). Range (W, -, -); H= Require ('./range.js'). Range (H, -, -); Obj1.style.width= W +'px'; Obj1.style.height= H +'px'; }; Document.onmouseup=function () {Document.onmousemove=NULL; Document.onmouseup=NULL; }; return false; }; } Exports.scale=Scale ; });
Index.html
<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> Untitled Document </title><style>#div1 {width:200px; height:200px; background:red; position:absolute; display:none;} #div2 {width:30px; height:30px; background:yellow; position:absolute; Right:0; Bottom0;} #div3 {width:100px; height:100px; background:blue; position:absolute; Right:0; Top0;}</style><script src=".. /sea/sea.js"></script><script>//a developmentSeajs.use ('./main.js');</script>"Button"Value="pop -up window"Id="INPUT1"><div id="Div1"> <div id="Div2"></div></div><div id="Div3"></div></body>2. Mastering the Seajs of the front-end series technology makes the work easier (II.)