JS利用 Sea.js 实现模块化:拖拽、缩放及范围限制

知识点总结:

  • Sea.js的使用:define、export、seajs.use、require等方法;   参考:http://seajs.org/docs/
  • Sea.js与require.js的区别;
  • 鼠标事件及位置的使用:mousedown、mousemove、mouseup、ev.clientX、ev.clientY;
  • 初始化模块、拖拽模块、缩放模块、范围限制模块的实现。

一、index页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块化:拖拽、缩放及范围限制</title>
    <style>
      *{ margin: 0; padding: 0; }
      body{ padding: 10px; }
      .div1{ width: 300px; height: 300px; background-color: red; position: absolute; left: 10px; top: 40px; display: none; }
      .div1 .div2{ width: 30px; height: 30px; background-color: yellow; position: absolute; right: 0; bottom: 0; cursor: nw-resize; }
      .div3{ width: 150px; height: 150px; background-color: blue; position: absolute; right: 0; top: 0; }
    </style>
</head>
<body>
    <input type="button" value="弹框" id="btn1">
    <div class="div1" id="div1">
        <div class="div2" id="div2"></div>
    </div>
    <div class="div3" id="div3"></div>

    <script src="./js/sea.js"></script>
    <script>
        seajs.use(‘./js/main.js‘,function(exp){
            exp.init();
        });
    </script>
</body>
</html>

二、初始化模块:main.js

define(function(require,exports,moduel){
    // 初始化
    function init() {
        var oBtn  = document.getElementById(‘btn1‘);
        var oDiv1 = document.getElementById(‘div1‘);
        var oDiv2 = document.getElementById(‘div2‘);
        var oDiv3 = document.getElementById(‘div3‘);

        oBtn.onclick = function(){
            oDiv1.style.display = ‘block‘;
      }

      // 引用拖拽模块
      require(‘./drag.js‘).drag(oDiv3);

      //引用缩放模块
      require(‘./scale.js‘).scale(oDiv1,oDiv2);
    }
    exports.init = init;

})

三、拖拽模块:drag.js

define(function(require,exports,moduel){
    // 定义拖拽方法
    function drag(obj){
        var disX = 0;
        var disY = 0;
        // 鼠标按下事件
        obj.onmousedown = function(ev){
            var ev = ev || window.event;
            disX = ev.clientX - obj.offsetLeft;
            disY = ev.clientY - obj.offsetTop;

            //解决ie8以下版本中,obj里面有文字选中时的bug
            if(obj.setCapture){
                obj.setCapture();
            }

            // 鼠标按下并移动事件
            document.onmousemove = function(ev){
                var ev = ev || window.event;
                // 引用范围限制模块
                var L = require(‘./range_limit.js‘)
                    .rangeLimit(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0);
                var T = require(‘./range_limit.js‘)
                    .rangeLimit(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0);
                obj.style.left = L + ‘px‘;
                obj.style.top = T + ‘px‘;
            }

            // 鼠标抬起事件
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmousedown = null;
                //解决ie8以下版本中,obj里面有文字选中时的bug
                if(obj.releaseCapture){
                    obj.releaseCapture();
                }
            }

            // 解决obj是图片时拖拽出现两个图片的bug
            return false;
        }
    }
    exports.drag = drag;
})

四、缩放模块:scale.js

define(function(require,exports,moduel){
    // 定义缩放方法
    function scale(parentarea, subarea) {
        var disW = 0,            //定义缩放对象的起始宽度
            disH = 0,            //定义缩放对象的起始高度
            startX = 0,          //定义缩放滑块区域的起始X坐标
            startY = 0;          //定义缩放滑块区域的起始Y坐标
        // 鼠标按下事件
        subarea.onmousedown = function(ev){
            var ev = ev || window.event;
            // 赋值
            disW = parentarea.offsetWidth;
            disH = parentarea.offsetHeight;
            startX =  ev.clientX;
            startY =  ev.clientY;

            // 鼠标按下并移动事件
            document.onmousemove = function(ev){
                var ev = ev || window.event;
                // 引用范围限制模块
                var W = require(‘./range_limit.js‘).rangeLimit(ev.clientX - startX + disW ,600 , 100);
                var H = require(‘./range_limit.js‘).rangeLimit(ev.clientY - startY + disH , 600 , 100);
                parentarea.style.width =  W + ‘px‘;
                parentarea.style.height = H  + ‘px‘;
            }

            // 鼠标抬起事件
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmousedown = null;
            }
            return false;
        }
    }
    exports.scale = scale;
})

五、范围限制模块:range_limit.js

define(function (require,exports,moduel) {
    //定义范围限制方法
    function rangeLimit(currange, maxrange, minrange){ //currange:当前位置  maxrange:最大位置   minrange:最小位置
        if(currange > maxrange){
            currange = maxrange;
        }
        if (currange < minrange){
            currange = minrange;
        }
        return currange;
    }
     exports.rangeLimit = rangeLimit;
})

参考:http://study.163.com/course/courseLearn.htm?courseId=717031#/learn/video?lessonId=900193&courseId=717031

时间: 2024-10-26 07:16:26

JS利用 Sea.js 实现模块化:拖拽、缩放及范围限制的相关文章

nw.js FrameLess Window下的窗口拖拽与窗口大小控制

nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将frame选项设置为false. { "name": "1", "main": "index.html", "nodejs": true, "single-instance": false, &

jquery.js与sea.js综合使用

jquery.js与sea.js综合使用 目录 模块定义 define id dependencies factory exports require require.async require.resolve require.load require.constructor module module.id module.dependencies module.exports module.constructorseajs.configalias jquery.js与sea.js综合使用 简介

require.js与sea.js的区别

hi,感谢各位读者能够阅读我的文章. 下面为大家讲解一下require.js和sea.js的区别.纯属个人意见,不喜勿喷. 首先原理上的区别 sea.js遵循CMD规范.书写方式类似node.js的书写模板代码.依赖的自动加载,配置的简洁清晰.说白了就是懒加载. require.js遵循AMD规范,CMD和AMD基本相同,最大的区别是就CMD是懒加载,AMD是预加载. 简单来说,就是sea.js属于懒加载,require.js属于预加载. 在这里,顺便扩展一下预加载和懒加载的优缺点 预加载:当第

利用插件(jQuery-ui.js)实现表格行的拖拽排序

template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<table class="table-common" id="aggVDtTable"> <thead> <tr style="width: 100%;"> <th class="th1" style

【 D3.js 进阶系列 — 6.0 】 拖拽的应用(Drag)

拖拽(Drag)是交互式中很重要的一种,本文将讲解拖拽的使用方法. 1. drag的定义 D3中可用 d3.behavior.drag() 来定义 drag 行为. var drag = d3.behavior.drag() .on("drag", dragmove); function dragmove(d) { d3.select(this) .attr("cx", d.cx = d3.event.x ) .attr("cy", d.cy =

原生JS实现弹出窗口的拖拽(直接copy可用)

上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思路:拖动这个操作起始分为三个部分: 鼠标左键按下,此时才开始可以拖动: 鼠标移动,拖动开始:根据光标的移动给div相对应的纵轴.横轴的偏移: 鼠标左键松手,拖动结束,不可以再拖动了. 每一步需要做的事: 1中需要将初始化的拖动标示量置为true(可以拖动了).记录光标起始坐标和div的起始坐标 2中

关于js在一个固定的盒子里面拖拽的问题(包含临界值)

回武汉打卡第三天,武汉加油,逆战必胜!今天我们一起分享一下js拖拽的问题. 当然实现拖拽方法是有很多的,下面简单讲一种方法,大致思路如下: 首先需要用到的事件主要有  onmousedown,onmousemove,onmouseup.因为是小盒子(small)在拖拽拖拽,所以首先onmousedown是绑定在small小盒子上面:而拖拽是在文档中进行的,所以onmousemove和onmouseup可以写在文档对象上: 其次css在书写时记得使用定位,不要使用fixed(位置是相对于浏览器窗口

JavaScript模块化编程之require.js与sea.js

个人倾向于require.js AMD 是 RequireJS 在推广过程中对模块定义的规范化产出.CMD 是 SeaJS 在推广过程中对模块定义的规范化产出.类似的还有 CommonJS Modules/2.0 规范,是 BravoJS 在推广过程中对模块定义的规范化产出.还有不少?? AMD 即Asynchronous Module Definition,中文名是异步模块定义的意思. CMD 即Common Module Definition通用模块定义,CMD规范是国内发展出来的,就像AM

利用jQuery-UI和jsPlumb实现拖拽连接模型

简介 之前公司需要做一个自定义数据搜索模型的功能,大体是这样的:左边显示的每一个模型对应于数据库中的一个表,把左边的模型拉入右边的容器内,会显示这个模型(也就是表)下的列信息,然后通过连线确定各独立的模型之间的关系(对应于数据库中的多表链接查询),然后保存数据到后台执行.由于保存模型就是对容器中的模型的一个解析,这里就不做展示了,这个demo主要处理模型的展示以及如何链接. 话不多说,先上图:  需要用到的东西 这个功能主要用到的是jQuery UI的拖拽功能以及jsPlumb连线插件. jsP