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

最新推荐文章于 2020-11-08 23:14:30 发布

前端向朔

最新推荐文章于 2020-11-08 23:14:30 发布

阅读量634

点赞数

分类专栏： JavaScript 文章标签：面向对象拖拽

本文链接：https://blog.csdn.net/u013778905/article/details/60632213

版权

JavaScript 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

该博客介绍了如何使用面向对象的方式封装HTML和JS代码，实现简易的窗口拖动功能。通过定义构造函数、在原型上添加方法，然后创建对象实例并调用来完成拖拽操作。

摘要由CSDN通过智能技术生成

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();