JS调整html元素大小

        想在页面上实现拖动两个元素分界位置可以改变元素的大小，基本思路是：在两个元素之间增加一个分界元素，监听该元素的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>