简易拖动窗口-面向对象封装

来源：互联网发布：沈阳办公软件培训班编辑：程序博客网时间：2024/04/27 13:39

HTML

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>0305_拖动窗口</title>        <link rel="stylesheet" type="text/css" href="css/drag.css" />        <style>            body{background: #FCFDED;}            .divClass{                width:200px;height: 300px;background: #41C9C5;                border-radius: 15px;overflow: hidden;                position: absolute;            }            .titleClass{                width:95%;height: 20px;background: #36ADAA;                margin:5px auto;border-radius: 15px;cursor: pointer;            }            .titleClass:hover{                background: #42D1CE;            }        </style>    </head>    <body>        <div id="startBtn">按钮</div>    </body></html>

JS

;(function(win){    var divConfig = {        'class':'divClass',        'id':'divId'    }    var titleConfig = {        'class':'titleClass',        'id':'titleId'    }    //创建一个构造函数    function Drag(){        this.getId = function(n){            return document.getElementById(n);        }    }    //在构造函数的原型链上定义一些方法    Drag.prototype = {        init: function(){            var _self = this;            _self.getId('startBtn').onclick = function(){                _self.event();            }        },        event: function(){            var _self = this;            //外面的div            var _div = _self.createDom('div');            _self.setAttr(_div, divConfig);            _self.appendTo(document.body, _div);            //title div            var _title = _self.createDom('div');            _self.setAttr(_title, titleConfig);            _title.onmousedown = function(e){                _self.mouseMove();            }            _self.appendTo(_self.getId(divConfig.id), _title);        },        appendTo: function(parent, sub){            var _self = this;            parent.appendChild(sub);        },        createDom:function(n){            var _self = this;            //判断该元素存不存在            var _elem = _self.getId(n);            if (!_elem) {                return document.createElement(n);            }else{                return _elem;            }        },        setAttr: function(n, o){            var _self = this;            for(var i in o){                n.setAttribute(i, o[i]);            }        },        mouseMove: function(){            var _self = this;            document.onmousemove = function(e){                //clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标                var x = e.clientX;                var y = e.clientY;                _self.getId(divConfig.id).style.left = x - 100 + 'px';                _self.getId(divConfig.id).style.top = y -10 + 'px';            }            document.onmouseup = function(){                document.onmousemove = null;                document.onmouseup = null;            }        }    }    //将对象挂在win参数上，实际是挂在了webfeel的命名空间下面，    //这样后面其实会造成链式调用很长    win.drag = new Drag();})(window.webfeel = window.webfeel || {});//添加webfeel命名空间，并先判断是否存在，如果不存在就定义为一个空对象//调用webfeel.drag.init();

当然JS要放在之前。
效果没什么好展示的，主要还是看下里面对象的封装吧，先定义构造函数，再在原型上定义一些方法，最后通过new操作符创建一个对象实例并调用他。

0 0