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

Posted 奔跑的蜗牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

以上是关于JS利用 Sea.js 实现模块化：拖拽缩放及范围限制的主要内容，如果未能解决你的问题，请参考以下文章

Sea.js学习1——初识Sea.js

Sea.js学习3——Sea.js的CMD 模块定义规范

sea.js模块化工具

Sea.js学习笔记

Require.js与Sea.js的区别

seajs入门使用