知识点总结：

  • 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;

})

参考：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. sql月，年，统计报表sql报表

    select DevName as 设备名称, count(flux) as 流量数据个数, max(flux) as 流量最大值, min(flux) as 流量最小值, avg(flux) as ...

  2. jdk1.8新特性-Lambda表达式使用要点

    前言 在jdk1.8出来的时候看到过,没怎么了解.但是最近再看kafka和spark框架,框架示例中ava版的很多地方用到Lambda表达式,发现使用Lambda表达式代码确实简单了好多,有些例子大致 ...

  3. OSI七层协议模型及OSI参考模型中的数据封装过程

    转载自:http://blog.csdn.net/qq_14935437/article/details/71081546 OSI模型,即开放式通信系统互联参考模型(Open System Inter ...

  4. 定点数(fixed-point number)

    定义 定点数(fixed-point number)就是小数点位置固定的数,也就是说,小数点后面的位数是固定的,比如要记录一笔账目,这些账目的数字都不会超过100,就可以使用2位小数位定点数来记录,比 ...

  5. Greedy Gift Givers　贪婪的送礼者

    Description 对于一群要互送礼物的朋友,TRW要确定每个人送出的钱比收到的多多少.在这一个问题中,每个人都准备了一些钱来送礼物,而这些钱将会被平均分给那些将收到他的礼物的人.然而,在任何一群 ...

  6. 算法与数据结构实验题 6.4 Summary

    ★实验任务 可怜的 Bibi 丢了好几台手机以后,看谁都像是小偷,他已经在小本本上记 下了他认为的各个地点的小偷数量. 现在我们将 Bibi 的家附近的地形抽象成一棵有根树.每个地点都是树上的 一个节 ...

  7. <Android>列表、网格、画廊视图及适配器的绑定

    列表视图和适配器的绑定 列表视图既可以使用ListView组件,也可以继承ListActivity.显示可以是ArrayAdapter,也可以是游标SimpleCursorAdapter,还可以是继承 ...

  8. VS2012或VS2010 工具栏中无法显示DevExpress控件

    进入命令提示符 跳转到Dev控件安装目录,如[目录D:\Program Files (x86)\DevExpress\DXperience 12.2\Tools]下, 然后执行命令: ToolboxC ...

  9. DAY1敏捷冲刺

    站立式会议 工作安排 (1)服务器配置 (2)数据库建表 (3)页面初步样式设计 (4)主要页面之间的交互 燃尽图 代码提交记录 感想 林一心:后端云服务器的配置确实是一个挑战,目前还在摸索中 赵意: ...

  10. 【week3】四则运算 单元测试

    上一周的四则运算有bug,这次补充正确代码: // 中缀转后缀 public String[] SolveOrder(String[] in, HashMap<String, Integer&g ...