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. 教你如何精通Struts：Tiles框架

    Tiles框架特性和内容 Tiles框架为创建Web页面提供了一种模板机制,它能将网页的布局和内容分离.它允许先创建模板,然后在运行时动态地将内容插入到模板中.Tiles 框架建立在JSP的inclu ...

  2. 传大附件在iis7以上的设置

    IIS7下设置上传附件大小的限制,下载附件限制问题   最近项目中涉及到一个上传附件的问题,项目在本地运行时上传无论多大的附件都是没有问题,但是一旦部署到服务器上以后上传的附件超过一定大小就上传不成功 ...

  3. c++ 对象内存分配和虚函数

    1. c++类对象(不含虚函数)在内存中的分布 c++类中有四种成员:静态数据.非静态数据.静态函数.非静态函数. 1. 非静态数据成员放在每个对象内部,作为对象专有的数据成员 2. 静态数据成员被抽 ...

  4. JSON 语法规则详解

    JSON 的语法规则十分简单,无论用何种方法总结都只有数条而已,它参考了 C 语言家族的一些习惯,学习起来并不会感到陌生. 回顾JSON 的五点语法 1)- 数组(Array)用方括号("[ ...

  5. java语法体系

    乱写的不具备参考性,只是一个备忘录

  6. View绑定式监听器实现原理

    在我们开发android的时候,会经常重写自定义的View去满足一些需求 然后有时候view会提供一些回调,比如view某个部分被点击了,我们需要通知使用者然后再通过接口传一些参数过去. 对于我之前的 ...

  7. HTML5自定义属性对象Dataset简介

    一.html5 自定义属性介绍 我之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设 ...

  8. robotframework笔记15

    资源和变量文件 用户关键字和变量 测试用例文件 和 测试套件 初始化文件只能用于文件在哪里 了,但 资源文件 提供一种机制来分享它们. 自 资源文件结构非常接近测试用例文件,它是 容易创建它们. 变量 ...

  9. [saiku] 免登陆进入管理后台

    上一篇分析了介绍了如何简化和修改saiku的界面[http://www.cnblogs.com/avivaye/p/4877882.html] 这一篇说明下如何去掉免登陆进入saiku 管理台 1.修 ...

  10. \bin\sh.exe:*** Couldn't reserve space for cygwin's heap,Win32 error 0

    Git一直使用都好好的,今天git pull的时候,报了如下的错误,\bin\sh.exe:*** Couldn't reserve space for cygwin's heap,Win32 err ...