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. poj2420A Star not a Tree?(模拟退火）

    链接 求某一点到其它点距离和最小,求这个和,这个点 为费马点. 做法:模拟退火 #include <iostream> #include<cstdio> #include< ...

  2. hdu 2063 过山车（二分图最佳匹配）

    经典的二分图最大匹配问题,因为匈牙利算法我还没有认真去看过,想先试试下网络流的做法,即对所有女生增加一个超级源,对所有男生增加一个超级汇,然后按照题意的匹配由女生向男生连一条边,跑一个最大流就是答案( ...

  3. 配置Linux任务计划

    Linux有三种计划任务: at:指定一个时间执行一个任务 (适用一个或多个任务,执行一次后就不用) cron:根据一个时间表自动执行任务 (使用一个或多个任务,周期性执行) 系统级别的计划任务及其扩 ...

  4. linux下在jar包中找类是否存在

    find /usr/lib -name "*.jar" -exec grep -Hsli 类名 {} \;

  5. Sqlserver_判断该路径是否存在该文件

    declare @result int =0declare @path nvarchar(200)='d:\1.csv'execute master.dbo.xp_fileexist @path ,@ ...

  6. hiho_1055_刷油漆

    题目大意 一棵树,每个节点都有相应的value值.从根开始选择M个节点相互连通,使得这些节点的value值之和最大. 题目链接:[刷油漆][1] 题目分析 典型的树形dp,dp[i][j] 表示以节点 ...

  7. 基于SourceTree 下的 Git Flow 模型

    基于SourceTree 下的 Git Flow 模型 1. sourceTree  是一个开源的git 图形管理工具,可下载mac版本,windows版本 2. Git Flow 是一套使用Git进 ...

  8. iOS 使用drawRect: 绘制虚线椭圆

    iOS 使用drawRect: 绘制虚线椭圆 1:首先如果要使用 drawRect 绘图 要导入 CoreGraphics.framework 框架 然后 创建 自定义view, 即是 myView继 ...

  9. 20145218 《Java程序设计》课程总结

    20145218 <Java程序设计>课程总结 每周读书笔记链接汇总 20145218<Java程序设计>第一周学习总结 20145218<Java程序设计>第二周 ...

  10. 5.4.2 使用配置启动firefox

    1.使用firefox的本地配置加载浏览器 使用本地配置加载浏览器,代码如下. 这样运行后,可以看到firebug等插件都已启动. 练习:假设做性能测试时,需要获取某个状况下的页面网络运行参数.要求完 ...