drag.js
// JavaScript Document //B开发 define(function(require,exports,module){ function drag(obj){ var disX = 0; var disY = 0; obj.onmousedown = function(ev){ var ev = ev || window.event; disX = ev.clientX - obj.offsetLeft; disY = ev.clientY - obj.offsetTop; document.onmousemove = function(ev){ var ev = ev || window.event; var L = ev.clientX - disX; var T = 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开发 define(function(require,exports,module){ var oInput = document.getElementById('input1'); var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = 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; } } exports.range = range; });
scale.js
// JavaScript Document //C开发 define(function(require,exports,module){ function scale(obj1,obj2){ var downX = 0; var downY = 0; var downW = 0; var downH = 0; obj2.onmousedown = function(ev){ var ev = ev || window.event; downX = ev.clientX; downY = ev.clientY; downW = obj1.offsetWidth; downH = obj1.offsetHeight; document.onmousemove = function(ev){ var ev = ev || window.event; var W = ev.clientX - downX + downW; var H = ev.clientY - downY + downH; W = require('./range.js').range(W , 500 , 100); H = require('./range.js').range(H , 500 , 100); 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> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1{ 200px; height:200px; background:red; position:absolute; display:none;} #div2{ 30px; height:30px; background:yellow; position:absolute; right:0; bottom:0;} #div3{ 100px; height:100px; background:blue; position:absolute; right:0; top:0;} </style> <script src="../sea/sea.js"></script> <script> //A开发 seajs.use('./main.js'); </script> </head> <body> <input type="button" value="弹窗" id="input1"> <div id="div1"> <div id="div2"></div> </div> <div id="div3"></div> </body> </html>