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. Java源码初学_HashSet&LinkedHashSet

    一.概述 HashSet是建立在HashMap的基础上的,其内部存在指向一个HashMap对象的引用,操作HashSet实际上就是操作HashMap,而HashMap中所有键的值都指向一个叫做Dumm ...

  2. surfaceview介绍

    [1]surfaceview 控件是一个重量级控件      [2]内部维护了2个线程     A 获取数据  负责显示     B 负责显示  获取数据      [3]他可以直接在子线程更新ui ...

  3. golang 定时器

    上网查了下相关资料,基本上都介绍的是github.com\robfig\cron这个包来执行定时任务,试了下确实可以执行.但是此包下没有删 除任务的方法,只有暂停的方法(Stop),若要停止之前的任务 ...

  4. 在Windows和Linux上安装paramiko模块

    一.paramiko模块有什么用? paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接.由于使用的是python这样的能够跨平台运行的语言 ...

  5. ORA-00205

    场景 数据库启动时报错.关闭前还是正常运行的,再次启动时,就报了以下错误. Copyright (c) , , Oracle. All rights reserved. Connected to an ...

  6. Spring MVC 之拦截器（八）

     在springMVC中实现拦截器有两种方式 1.实现HandlerInterceptor接口 2.继承HandlerInterceptorAdaptor类 编写拦截器: package com.cy ...

  7. 转！ java 中“==” 与“ .equals ”比较

    在java程序设计中,经常需要比较两个变量值是否相等.例如1.简单数据类型比较a = 10;b = 10;if(a == b){//写要执行的代码}2.引用数据类型比较ClassA a = new C ...

  8. 【ubuntu java】java: error while loading shared libraries: libjli.so: cannot open shared object file: No such file or directory

    先检查了环境变量PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/loca ...

  9. phalcon: 资源文件管 理 引入css，js

    <?php class IndexController extends Phalcon\Mvc\Controller { public function index() { //添加本地css资 ...

  10. 当CanTK遇到PhoneGap

    有朋友问能不能在CanTK和AppBuilder开发的APP里发送UDP数据,HTML5里只能用HTTPS/HTTP/WebSocket几种通讯方式,要使用UDP需要通过phonegap打包成APK等 ...