drag.js

// JavaScript Document

//B开发

define(function(require,exports,module){

    function drag(obj){

        var disX = ;

        var disY = ;

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

        var downY = ;

        var downW = ;

        var downH = ;

        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 ,  , );

                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>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#div1{ width:200px; height:200px; background:red; position:absolute; display:none;}

#div2{ width:30px; height:30px; background:yellow; position:absolute; right:; bottom:;}

#div3{ width:100px; height:100px; background:blue; position:absolute; right:; top:;}

</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>

2.精通前端系列技术之seajs模块化使工作更简单（二）的更多相关文章

  1. 2.精通前端系列技术之JavaScript模块化开发 seajs（一）

    在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...

  2. 2.精通前端系列技术之JS模块化开发-深入学习seaJs（四）

    深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基 ...

  3. 2.精通前端系列技术之seajs和gruntJs结合开发（三）

    1.我们先来了解下模块化历史 模块化历史 nodeJS的出现(http://nodejs.org/) commonJS规范(http://www.commonjs.org/) 浏览器JS的模块化? A ...

  4. 3.精通前端系列技术之深入学习Jquery(一)

    使用Jquery的好处: •简化JS的复杂操作 •不再需要关心兼容性(原生js获取元素样式.事件需要做兼容性) •提供大量实用方法 1.选择网页元素 <!DOCTYPE html PUBLIC ...

  5. 1.精通前端系列技术之js正则表达式

    在不会正则的时候,我们寻找字符串某些规律或者截取部分特殊字符的时候,我们需要写很多行代码来获取我们想要的字符串,在使用正则之后,代码量会大量简洁很多 1.字符串的比较,判断是否数字类型的字符串,我们用 ...

  6. [后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs

    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...

  7. seaJs模块化开发简单入门

    随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发 ...

  8. 通往成功的钥匙--Web前端开发技术

    互联网是一个服务性行业,用户对网站良好的体验度,直接影响到网站的效果.无论你做了多少广告推广,没有用户体验度等于零.Web前端技术是为了解决用户体验度而诞生的.无论是百度.新浪.阿里巴巴等大型网站,还 ...

  9. gulp基于seaJs模块化项目打包实践【原创】

    公司还一直在延续使用jq+seajs的技术栈,所以只能基于现在的技术栈进行静态文件打包,而众所周知seajs的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...

随机推荐

  1. Mono for Android布局控件属性小结

    1. layout_weight 用于给一个线性布局中的诸多视图的重要度赋值. 所有的视图都有一个layout_weight值,默认为零,意思是需要显示 多大的视图就占据多大的屏幕空 间.若赋一个高于 ...

  2. python模块以及导入出现ImportError: No module named 'xxx'问题

    python中,每个py文件被称之为模块,每个具有__init__.py文件的目录被称为包.只要模块或者包所在的目录在sys.path中,就可以使用import 模块或import 包来使用如果你要使 ...

  3. windows下重新安装TCP/IP协议栈

    一.windows重装TCP/IP协议     前两天在windows下安装开发环境的时候,把系统的TCP/IP协议栈给搞跪了,导致系统无法ping localhost.无法在程序中创建socket等 ...

  4. python操作mongodb之八地理索引空间数据

    from pymongo import MongoClient, GEO2D #使用geo_example库 db = MongoClient('192.168.30.252',27017).geo_ ...

  5. GoF--单例设计模式

    保证一个类仅有一个实例,并提供一个访问它的全局访问点

  6. Git 分支管理是一门艺术

    转载: Git 分支管理是一门艺术 1 要确保:团队成员从主分支(master)获得的都是处于可发布状态的代码,而从开发分支(develop)应该总能够获得最新开发进展的代码. 2 "辅助分 ...

  7. [bootstrap] 基本css样式和组件

    一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...

  8. java SE学习之线程同步（详细介绍）

           java程序中可以允许存在多个线程,但在处理多线程问题时,必须注意这样一个问题:               当两个或多个线程同时访问同一个变量,并且一些线程需要修改这个变量时,那么这个 ...

  9. hdu-----(3746)Cyclic Nacklace（kmp）

    Cyclic Nacklace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  10. Javascript 中的false、0、null、undefined和空字符串对象

    在Javascript中,我们经常会接触到题目中提到的这5个比较特别的对象——false.0.空字符串.null和undefined.这几个对象很容易用错,因此在使用时必须得小心. 类型检测 我们下来 ...