想在頁面上實現拖動兩個元素分界位置可以改變元素的大小，基本思路是：在兩個元素之間增加一個分界元素，監聽該元素的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
                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>