知识点总结：
-
Sea.js的使用：define、export、seajs.use、require等方法； 参考：http://seajs.org/docs/
-
Sea.js与require.js的区别；
-
鼠标事件及位置的使用：mousedown、mousemove、mouseup、ev.clientX、ev.clientY；
-
初始化模块、拖拽模块、缩放模块、范围限制模块的实现。
一、index页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模块化：拖拽、缩放及范围限制</title> <style> *{ margin: 0; padding: 0; } body{ padding: 10px; } .div1{ width: 300px; height: 300px; background-color: red; position: absolute; left: 10px; top: 40px; display: none; } .div1 .div2{ width: 30px; height: 30px; background-color: yellow; position: absolute; right: 0; bottom: 0; cursor: nw-resize; } .div3{ width: 150px; height: 150px; background-color: blue; position: absolute; right: 0; top: 0; } </style> </head> <body> <input type="button" value="弹框" id="btn1"> <div class="div1" id="div1"> <div class="div2" id="div2"></div> </div> <div class="div3" id="div3"></div> <script src="./js/sea.js"></script> <script> seajs.use('./js/main.js',function(exp){ exp.init(); }); </script> </body> </html>
二、初始化模块：main.js
define(function(require,exports,moduel){ // 初始化 function init() { var oBtn = document.getElementById('btn1'); var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); oBtn.onclick = function(){ oDiv1.style.display = 'block'; } // 引用拖拽模块 require('./drag.js').drag(oDiv3); //引用缩放模块 require('./scale.js').scale(oDiv1,oDiv2); } exports.init = init; })
三、拖拽模块：drag.js
define(function(require,exports,moduel){
// 定义拖拽方法 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; //解决ie8以下版本中，obj里面有文字选中时的bug if(obj.setCapture){ obj.setCapture(); } // 鼠标按下并移动事件 document.onmousemove = function(ev){ var ev = ev || window.event;
// 引用范围限制模块 var L = require('./range_limit.js') .rangeLimit(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0); var T = require('./range_limit.js') .rangeLimit(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0); obj.style.left = L + 'px'; obj.style.top = T + 'px'; } // 鼠标抬起事件 document.onmouseup = function(){ document.onmousemove = null; document.onmousedown = null;
//解决ie8以下版本中，obj里面有文字选中时的bug if(obj.releaseCapture){ obj.releaseCapture(); } } // 解决obj是图片时拖拽出现两个图片的bug return false; } } exports.drag = drag; })
四、缩放模块：scale.js
define(function(require,exports,moduel){ // 定义缩放方法 function scale(parentarea, subarea) { var disW = 0, //定义缩放对象的起始宽度 disH = 0, //定义缩放对象的起始高度 startX = 0, //定义缩放滑块区域的起始X坐标 startY = 0; //定义缩放滑块区域的起始Y坐标
// 鼠标按下事件 subarea.onmousedown = function(ev){ var ev = ev || window.event; // 赋值 disW = parentarea.offsetWidth; disH = parentarea.offsetHeight; startX = ev.clientX; startY = ev.clientY; // 鼠标按下并移动事件 document.onmousemove = function(ev){ var ev = ev || window.event; // 引用范围限制模块 var W = require('./range_limit.js').rangeLimit(ev.clientX - startX + disW ,600 , 100); var H = require('./range_limit.js').rangeLimit(ev.clientY - startY + disH , 600 , 100); parentarea.style.width = W + 'px'; parentarea.style.height = H + 'px'; } // 鼠标抬起事件 document.onmouseup = function(){ document.onmousemove = null; document.onmousedown = null; } return false; } } exports.scale = scale; })
五、范围限制模块：range_limit.js
define(function (require,exports,moduel) { //定义范围限制方法 function rangeLimit(currange, maxrange, minrange){ //currange:当前位置 maxrange：最大位置 minrange：最小位置 if(currange > maxrange){ currange = maxrange; } if (currange < minrange){ currange = minrange; } return currange; } exports.rangeLimit = rangeLimit; })