JS实现拖动元素分界改变元素大小

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



代码：<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

4000
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>