JS调整html元素大小

野性酷女 2022-05-28 11:00 320阅读 0赞

想在页面上实现拖动两个元素分界位置可以改变元素的大小，基本思路是：在两个元素之间增加一个分界元素，监听该元素的mousedown事件，事件触发时立刻设置监听页面mousemove事件以及mouseup事件，mousemove事件处理元素大小修改，mouseup事件触发时应该移除页面mousemove事件。其中主要是mousemove事件，其实就是计算鼠标在拖动过程中，鼠标相对屏幕的垂直距离（或者水平距离）的变化量，然后分界元素上下（或左右）的两个元素的高度（或宽度）跟随此变化量变化即可。

项目使用Vue.js开发，所以这里写成一个单页面组件的形式。

实现效果：

![70][]

代码：

<template>
        <div id="board">
            <div class="card" id="node1">
                区域1
            </div>
            <div id="dividing-line1"></div>
            <div class="card" id="node2">
                区域2
            </div>
            <div id="dividing-line2"></div>
            <div class="card" id="node3">
                区域3
            </div>
        </div>
    </template>
    <script>
    
    export default {
        methods: {
            setMouseEventListen () {
                let oLine1 = document.getElementById('dividing-line1')
                let oLine2 = document.getElementById('dividing-line2')
                oLine1.lastElementID = 'node1'
                oLine1.nextElementID = 'node2'
                oLine2.lastElementID = 'node2'
                oLine2.nextElementID = 'node3'
                oLine1.onmousedown = this.changeDivheight
                oLine2.onmousedown = this.changeDivheight
            },
            changeDivheight (event) {
                let oEventNode = event.srcElement
                let last = oEventNode.lastElementID
                let next = oEventNode.nextElementID
                let oDivNode1 = document.getElementById(last)
                let oDivNode2 = document.getElementById(next)
                let oldY = event.clientY
                let oBoard = document.getElementById('board')
                let oldHeight1 = getComputedStyle(oDivNode1).getPropertyValue('height').split('px')[0] // 获取高度数值
                let oldHeight2 = getComputedStyle(oDivNode2).getPropertyValue('height').split('px')[0]
                oBoard.onmousemove = function (e) { // 鼠标移动事件，元素大小随之改变
                    let detaY = e.clientY - oldY
                    console.log('mousemove', Number(oldHeight1) + detaY)
                    oDivNode1.style.height = (Number(oldHeight1) + detaY) + 'px' // 这里注意 + px
                    oDivNode2.style.height = (Number(oldHeight2) - detaY) + 'px'
                }
                document.onmouseup = function () {  //onmouseup 要绑定到document 防止鼠标被移出但是事件未释放的异常
                    console.log('onmouseup')
                    oBoard.onmousemove = null
                    document.onmouseup = null
                }
            }
        },
        mounted () {
            this.setMouseEventListen()
        }
    }
    </script>
    <style scoped>
    #board {
        margin: 0 auto;
        height:300px;
        width:360px;
        display:flex;
        flex-direction:column;
        align-items: stretch
    }
    
    #dividing-line1, #dividing-line2 {
        width:100%;
        height:10px
    }
    #dividing-line1:hover, #dividing-line2:hover {
        cursor:n-resize
    }
    .card {
        flex: 1 1 auto;
        padding: 10px;
        overflow: scroll;
        box-shadow: 0 0 5px gray;
        border-radius: 2px;
        text-align: center ;
        font-size: 2rem
    }
    
    .card:hover {
        box-shadow: 0 0 10px black
    }
    </style>

[70]: /images/20220528/e567030566794cb5af1577ffe70484aa.png