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. thinkphp分页效果的制作，按查询条件分页正确做法

    PHP代码: <?php namespace Home\Controller; use Think\Controller; use Home\Clas\Cate; class IndexCont ...

  2. iOS 开发之照片框架详解(1)

    http://kayosite.com/ios-development-and-detail-of-photo-framework.html/comment-page-1 一. 概要 在 iOS 设备 ...

  3. Volley框架的流程图分析

          接着上一篇Volley框架的使用,这一篇主要主要讲Volley框架运作的原理.主要使用流程图来叙述,简单的分析了整个流程的过程,具体的请参考源代码或者查看我上一篇在文章末尾添上的链接. 一 ...

  4. linux mount命令的用法详细解析

    挂接命令(mount)首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用到的.命令格式:mount [-t vfstype] [-o options] ...

  5. python语法笔记（四）

    1.对象的属性     python一切皆对象,每个对象都可能有多个属性.python的属性有一套统一的管理方案. 属性的__dict__系统     对象的属性可能来自于其类定义,叫做类属性:还可能 ...

  6. about opencl

    Platform:LG G3,Adreno 330 1. 8M(3264x2448) memmap方式读入时间24ms,读出时间12ms,时间与内存大小基本成线性关系.使用memmap 与 memco ...

  7. dshow,Sample Grabber 从摄像头采集

    char* CCameraDS::QueryFrame() { long evCode, size = 0; #if CALLBACKMODE static double lastSampleTime ...

  8. C++ Primer 第三章 标准库类型string运算

    1. 标准库类型 string string表示可变长的字符序列,使用string必须首先包含string头文件.如何初始化类的对象是由类本身决定的. int n; string s1;//默认初始化 ...

  9. 与MySQL的零距离接触 - 慕课网

    课程链接:与MySQL的零距离接触 环境配置: windows下安装mysql Download MySQL Installer for windows 课程目录 第1章 初涉MySQL     1- ...

  10. HTTP请求415错误 – 不支持的媒体类型(Unsupported media type)

    HTTP请求415错误 – 不支持的媒体类型(Unsupported media type) 通常有以下情况: 1:检查你的 http 请求头信息,比如 因为 User-Agent 被服务器设置 拒绝 ...