知识点总结：

  • Sea.js的使用：define、export、seajs.use、require等方法；   参考：http://seajs.org/docs/

  • Sea.js与require.js的区别；

  • 鼠标事件及位置的使用：mousedown、mousemove、mouseup、ev.clientX、ev.clientY；

  • 初始化模块、拖拽模块、缩放模块、范围限制模块的实现。

一、index页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模块化：拖拽、缩放及范围限制</title>
  6.     <style>
  7.     　　*{ margin: 0; padding: 0; }
  8.     　　body{ padding: 10px; }
  9.     　　.div1{ width: 300px; height: 300px; background-color: red; position: absolute; left: 10px; top: 40px; display: none; }
  10.     　　.div1 .div2{ width: 30px; height: 30px; background-color: yellow; position: absolute; right: 0; bottom: 0; cursor: nw-resize; }
  11.     　　.div3{ width: 150px; height: 150px; background-color: blue; position: absolute; right: 0; top: 0; }
  12.     </style>
  13. </head>
  14. <body>
  15.     <input type="button" value="弹框" id="btn1">
  16.     <div class="div1" id="div1">
  17.         <div class="div2" id="div2"></div>
  18.     </div>
  19.     <div class="div3" id="div3"></div>
  20.  
  21.     <script src="./js/sea.js"></script>
  22.     <script>
  23.         seajs.use('./js/main.js',function(exp){
  24.             exp.init();
  25.         });
  26.     </script>
  27. </body>
  28. </html>

二、初始化模块：main.js

  1. define(function(require,exports,moduel){
  2.     // 初始化
  3.     function init() {
  4.         var oBtn  = document.getElementById('btn1');
  5.         var oDiv1 = document.getElementById('div1');
  6.         var oDiv2 = document.getElementById('div2');
  7.         var oDiv3 = document.getElementById('div3');
  8.  
  9.         oBtn.onclick = function(){
  10.             oDiv1.style.display = 'block';
  11.     　　}
  12.  
  13.     　　// 引用拖拽模块
  14.     　　require('./drag.js').drag(oDiv3);
  15.  
  16.     　　//引用缩放模块
  17.     　　require('./scale.js').scale(oDiv1,oDiv2);
  18.     }
  19.     exports.init = init;
  20.  
  21. })

三、拖拽模块：drag.js

  1. define(function(require,exports,moduel){
  2.     // 定义拖拽方法
  3.     function drag(obj){
  4.         var disX = 0;
  5.         var disY = 0;
  6.         // 鼠标按下事件
  7.         obj.onmousedown = function(ev){
  8.             var ev = ev || window.event;
  9.             disX = ev.clientX - obj.offsetLeft;
  10.             disY = ev.clientY - obj.offsetTop;
  11.  
  12.             //解决ie8以下版本中，obj里面有文字选中时的bug
  13.             if(obj.setCapture){
  14.                 obj.setCapture();
  15.             }
  16.  
  17.             // 鼠标按下并移动事件
  18.             document.onmousemove = function(ev){
  19.                 var ev = ev || window.event;
  20.                 // 引用范围限制模块
  21.                 var L = require('./range_limit.js')
  22.                     .rangeLimit(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0);
  23.                 var T = require('./range_limit.js')
  24.                     .rangeLimit(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0);
  25.                 obj.style.left = L + 'px';
  26.                 obj.style.top = T + 'px';
  27.             }
  28.  
  29.             // 鼠标抬起事件
  30.             document.onmouseup = function(){
  31.                 document.onmousemove = null;
  32.                 document.onmousedown = null;
  33.                 //解决ie8以下版本中，obj里面有文字选中时的bug
  34.                 if(obj.releaseCapture){
  35.                     obj.releaseCapture();
  36.                 }
  37.             }
  38.  
  39.             // 解决obj是图片时拖拽出现两个图片的bug
  40.             return false;
  41.         }
  42.     }
  43.     exports.drag = drag;
  44. })

四、缩放模块：scale.js

  1. define(function(require,exports,moduel){
  2.     // 定义缩放方法
  3.     function scale(parentarea, subarea) {
  4.         var disW = 0,            //定义缩放对象的起始宽度
  5.             disH = 0,            //定义缩放对象的起始高度
  6.             startX = 0,          //定义缩放滑块区域的起始X坐标
  7.             startY = 0;          //定义缩放滑块区域的起始Y坐标
  8.         // 鼠标按下事件
  9.         subarea.onmousedown = function(ev){
  10.             var ev = ev || window.event;
  11.             // 赋值
  12.             disW = parentarea.offsetWidth;
  13.             disH = parentarea.offsetHeight;
  14.             startX =  ev.clientX;
  15.             startY =  ev.clientY;
  16.  
  17.             // 鼠标按下并移动事件
  18.             document.onmousemove = function(ev){
  19.                 var ev = ev || window.event;
  20.                 // 引用范围限制模块
  21.                 var W = require('./range_limit.js').rangeLimit(ev.clientX - startX + disW ,600 , 100);
  22.                 var H = require('./range_limit.js').rangeLimit(ev.clientY - startY + disH , 600 , 100);
  23.                 parentarea.style.width =  W + 'px';
  24.                 parentarea.style.height = H  + 'px';
  25.             }
  26.  
  27.             // 鼠标抬起事件
  28.             document.onmouseup = function(){
  29.                 document.onmousemove = null;
  30.                 document.onmousedown = null;
  31.             }
  32.             return false;
  33.         }
  34.     }
  35.     exports.scale = scale;
  36. })

五、范围限制模块：range_limit.js

  1. define(function (require,exports,moduel) {
  2.     //定义范围限制方法
  3.     function rangeLimit(currange, maxrange, minrange){ //currange:当前位置  maxrange：最大位置   minrange：最小位置
  4.         if(currange > maxrange){
  5.             currange = maxrange;
  6.         }
  7.         if (currange < minrange){
  8.             currange = minrange;
  9.         }
  10.         return currange;
  11.     }
  12.      exports.rangeLimit = rangeLimit;
  13. })

参考：http://study.163.com/course/courseLearn.htm?courseId=717031#/learn/video?lessonId=900193&courseId=717031

JS利用 Sea.js 实现模块化：拖拽、缩放及范围限制的更多相关文章

  1. nw.js FrameLess Window下的窗口拖拽与窗口大小控制

    nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...

  2. div/dom元素拖拽缩放插件，纯js实现拖拽缩放，不依赖jQuery~

    产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...

  3. jquery.js与sea.js综合使用

    jquery.js与sea.js综合使用   目录 模块定义 define id dependencies factory exports require require.async require. ...

  4. require.js与sea.js的区别

    hi,感谢各位读者能够阅读我的文章. 下面为大家讲解一下require.js和sea.js的区别.纯属个人意见,不喜勿喷. 首先原理上的区别 sea.js遵循CMD规范.书写方式类似node.js的书 ...

  5. require.js和sea.js的区别

    下面为大家讲解一下require.js和sea.js的区别.纯属个人意见,不喜勿喷. 首先原理上的区别 sea.js遵循CMD规范.书写方式类似node.js的书写模板代码.依赖的自动加载,配置的简洁 ...

  6. div拖拽缩放jquery插件编写——带8个控制点

    项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...

  7. Vue富文本编辑器（图片拖拽缩放）

    富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...

  8. 利用插件（jQuery-ui.js）实现表格行的拖拽排序

    template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...

  9. JavaScript模块化编程之require.js与sea.js

    为什么要模块化:当今,网站以不再是一个简单的页面,JavaScript也不再是做一些简单的脚本验证,随着WEB.20时代到来,前端工程师面临的必将是越来越庞大的JavaScript代码,越来越复杂的内 ...

随机推荐

  1. Swift-创建UIButton(其他UI组件雷同)

    let button = UIButton.init(frame: CGRectMake(, , , )) button.setTitle("按钮", forState: UICo ...

  2. Windows 7中安装Solr7

    最新忙里偷闲,研究一下了Lucene.Net,发现操作比较繁琐,同比相似的功能,感觉Solr比较简单,容易使用.不过由于Solr使用的是Java的环境,对于.Net开发的人员来说,还是比较陌生,搭配环 ...

  3. .net 内置对象之Session对象和Session的过期时间

    QQ:827969653 有需要的朋友可以下载Session类:SessionHelper类 http://technet.microsoft.com/zh-cn/library/system.web ...

  4. ERROR 1205 (HY000): Lock wait timeout exceeded; try restarting transaction 表被锁的解决办法

    转自:https://blog.csdn.net/mchdba/article/details/38313881 前言:朋友咨询我说执行简单的update语句失效,症状如下:mysql> upd ...

  5. maven Tomcat idea 热部署

    1.首先得有maven项目 2.配置tomcat,可以访问页面管理项目 修改: /conf/tomcat-users.xml <role rolename="manager-gui&q ...

  6. Go语言【第三篇】：Go变量和常量

    Go语言变量 变量来源于数学,是计算机语言中能存储计算结果或能表示值抽象概念.变量可以通过变量名访问.Go语言变量名由字母.数字.下划线组成,其中首字母不能为数字,声明变量的一般形式是使用var关键字 ...

  7. P2613 【模板】有理数取余

    题目描述 给出一个有理数 $c=\frac{a}{b}$ ,求 c mod 19260817 的值. 输入输出格式 输入格式: 一共两行. 第一行,一个整数 aa .第二行,一个整数 bb . 输出格 ...

  8. Creator开源游戏、插件、教程、视频汇总

    Creator开源游戏.插件.教程.视频汇总 来源 http://forum.cocos.com/t/creator/44782 王哲首席客服   17-03-17    4   史上最全,没有之一. ...

  9. 【题解】CQOI2012局部最小值

    上课讲的一道题,感觉也挺厉害的~正解是容斥 + 状压dp.首先我们容易发现一共可能的局部最小值数量是十分有限的,最多也只有 \(8\) 个.所以我们可以考虑状压. 建立出状态 \(f[i][j]\) ...

  10. [HZOI2016]偏序&[HZOI2015]偏序II K维偏序问题

    description Cogs: [HZOI2016]偏序 [HZOI2015]偏序 II data range \[ n\le 5\times 10^4\] solution 嵌套\(CDQ\)的 ...