原生js实现模态框拖动

由于本人水平有限，不足之处请大佬指出！

1.引入reset.css

https://meyerweb.com/eric/tools/css/reset/index.html;

2.编写html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
</head>
<body>
    <div class="fun">
        <div class="body-size">
            <label for="">控制内容的高度：</label>
            <input type="text" class="ctrlBodySizeIpt">
            <button class="ctrlBodySizeBtn">确认修改</button>
            <label for="">注意：内容的高度相对于头部和顶部的份数</label>
        </div>
    </div>
    <div class="showModal">
        <button class="showModalBtn">显示模态框</button>
    </div>
    <div class="drag">
        <div class="drag-header">
            <div class="close">X</div>
        </div>
        <div class="drag-body"></div>
        <div class="drag-footer"></div>
    </div>
</body>
</html>
3.编写index.css文件
body {
    background-color: rgba(0, 0, 0, .3);
}
.drag {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 600px;
    background-color: #ccc;
    border-radius: 8px;
    border: 1px solid #999 ;
    z-index: 20210706;
}
.drag .drag-header {
    position: relative;
    width: 100%;
    flex: 1;
    background-color: antiquewhite;
    cursor: pointer;
}
.drag .drag-body {
    width: 100%;
    flex: 7;
    background-color: beige;
}
.drag .drag-footer {
    width: 100%;
    flex: 1;
    background-color: skyblue;
}
.drag .drag-header .close {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 700;
    padding: 8px;
}
4.编写js文件

window.onload = function () {
        var commonState = {
            $: function (ele) {
                return document.querySelector(ele);
            },
            drag: null,
            getDrag: function() {
                return this.$('.drag');
            },
            getCloseBtn: function() {
                return this.$('.close');
            },
            getShowModalBtn: function() {
                return this.$('.showModalBtn');
            }
        }
        // 模态框拖动
        var dragModal = {
        innerX: null,
        innerY: null,
        dragInitX: null,
        dragInitY: null,
        init: function () {
            this.dragInitX = commonState.$('.drag').offsetLeft;
            this.dragInitY = commonState.$('.drag').offsetTop;
            console.log(this.dragInitX)
            this.press();
            this.up();
        },
        press: function() {
            commonState.$('.drag-header').addEventListener('mousedown', (e) => {
                if (e.button === 0) {
                    commonState.$('.drag').removeEventListener('mousemove', this.moveFn);
                    this.innerX = e.pageX - this.dragInitX;
                    this.innerY = e.pageY - this.dragInitY;
                    console.log(this.dragInitX)
                    this.move();
                }
            })
        },
        move: function() {
            commonState.$('.drag-header').addEventListener('mousemove', this.moveFn);
        },
        moveFn: (e) => {
            commonState.$('.drag').style.left = (e.pageX - dragModal.innerX) + 'px';
            commonState.$('.drag').style.top = (e.pageY - dragModal.innerY) + 'px';
        },
        up: function () {
            commonState.$('.drag-header').addEventListener('mouseup', (e) => {
                if(e.button === 0) {
                    console.log('up')
                    const dragInitX = e.pageX - this.innerX;
                    const dragInitY = e.pageY - this.innerY;
                    commonState.$('.drag').style.left = dragInitX + 'px';
                    commonState.$('.drag').style.top = dragInitY + 'px';
                    this.dragInitX = dragInitX;
                    this.dragInitY = dragInitY;
                    commonState.$('.drag-header').removeEventListener('mousemove', this.moveFn);
                }
            })
        }
    };
    dragModal.init();

    // 输入值控制内容大小功能
    var funState = {
        init: function() {
            this.ctrlBodySize();
        },
        dragBody: null,
        ctrlBodySizeIpt: null,
        ctrlBodySizeIpt: null,
        ctrlBodySize: function() {
            this.dragBody = commonState.$('.drag-body');
            this.ctrlBodySizeIpt = commonState.$('.ctrlBodySizeIpt');
            this.ctrlBodySizeBtn = commonState.$('.ctrlBodySizeBtn');
            this.ctrlBodySizeBtn.addEventListener('click', () => {
                const iptVal = this.ctrlBodySizeIpt.value;
                if (iptVal) this.dragBody.style.flex = iptVal;
                else alert('please input value');
            })
        }
    }
    funState.init();

    // 关闭模态框
    var closeState = {
        init: function () {
            commonState.getCloseBtn().addEventListener('click', () => {
                commonState.getDrag().style.display = 'none';
            })
            commonState.getShowModalBtn().addEventListener('click', () => {
                commonState.getDrag().style.display = 'flex';
            })
        }
    }
    closeState.init();
}
posted @ 2021-07-07 13:52  boomShak  阅读(174)  评论(0)    收藏  举报