ElectronVue系列 -- 4.左右拖拽div侧边栏，调整区域大小

如下，一分为三，想要可以拖拽，调整左、中、右大小

话不多说，直接上代码

代码示例

HTML代码

其实是5个div，拖拽区域也是div，只不过就是窄一点

<template>
	<div id="hello-id">
		<div id="left-id"></div>
		<div id="resize1" class="resize-div" />
		<div id="middle-id"></div>
		<div id="resize2" class="resize-div" />
		<div id="right-id"></div>
	</div>
</template>

CSS代码

css还是有的，鼠标样式至少要改变

#hello-id {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.resize-div {
  position: relative;
  width:5px;
  height:100%;
  cursor: w-resize;
  float:left;
  background-color: #eeeeee;
}

#left-id {
  height: 100%;
  width: 20%;
}

#middle-id {
  height: 100%;
  width: 25%;
}

#right-id {
  height: 100%;
  width: 55%;
}

JS代码

看代码前，请先注意两个概念

• clientX事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。
  MouseEvent.clientX即获取当前水平坐标
• left规定元素的左边缘。该属性定义了定位元素左外边距边界的偏移。

另外下面的有些逻辑是公共的，可以进行提取

export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    this.dragControllerDiv()
  },
  methods: {
    dragControllerDiv: function() {
      const box = document.getElementById('hello-id')
      const left = document.getElementById('left-id')
      const resize1 = document.getElementById('resize1')
      const middle = document.getElementById('middle-id')
      const resize2 = document.getElementById('resize2')
      const right = document.getElementById('right-id')
      // 左边拖拽区域添加mousedown事件
      resize1.onmousedown = function(e) {
        const initWindowWidth = box.clientWidth
        const initLeftWidth = left.clientWidth
        const initResize1Width = resize1.clientWidth
        const initMiddleWidth = middle.clientWidth
        const initResize2Width = resize2.clientWidth
        const initRightWidth = right.clientWidth
        const mouseStartDistanceToWindowLeft = e.clientX
        // 左边拖拽区域添加mousemove事件，并不断计算各区域宽度
        document.onmousemove = function(e) {
          const mouseFinalDistanceToWindowLeft = e.clientX
          // 获取鼠标移动的距离
          const mouseMovedDistance = mouseFinalDistanceToWindowLeft - mouseStartDistanceToWindowLeft
          // 各种计算距离和宽度
          resize1.style.left = initLeftWidth + mouseMovedDistance
          left.style.width = initLeftWidth + mouseMovedDistance + 'px'
          middle.style.left = (initMiddleWidth + mouseMovedDistance + initResize1Width) + 'px'
          middle.style.width = (initWindowWidth - initRightWidth - initLeftWidth - initResize1Width - initResize2Width - mouseMovedDistance) + 'px'
        }
        document.onmouseup = function() {
          document.onmousemove = null
          document.onmouseup = null
          resize1.releaseCapture && resize1.releaseCapture()
        }
        resize1.setCapture && resize1.setCapture()
        return false
      }
      // 右边拖拽区域添加mousedown事件
      resize2.onmousedown = function(e) {
        const initWindowWidth = box.clientWidth
        const initLeftWidth = left.clientWidth
        const initResize1Width = resize1.clientWidth
        const initMiddleWidth = middle.clientWidth
        const initResize2Width = resize2.clientWidth
        const mouseStartDistanceToWindowLeft = e.clientX
        // 右边拖拽区域添加mousemove事件，并不断计算各区域宽度
        document.onmousemove = function(e) {
          const mouseFinalDistanceToWindowLeft = e.clientX
          // 获取鼠标移动的距离
          const mouseMovedDistance = mouseFinalDistanceToWindowLeft - mouseStartDistanceToWindowLeft
          // 各种计算记录和宽度
          resize2.style.left = initLeftWidth + initResize1Width + initMiddleWidth + mouseMovedDistance
          middle.style.width = initMiddleWidth + mouseMovedDistance + 'px'
          right.style.left = (initLeftWidth + initResize1Width + initMiddleWidth + initResize2Width + mouseMovedDistance) + 'px'
          right.style.width = (initWindowWidth - initLeftWidth - initResize1Width - initMiddleWidth - initResize2Width - mouseMovedDistance) + 'px'
        }
        document.onmouseup = function() {
          document.onmousemove = null
          document.onmouseup = null
          resize2.releaseCapture && resize2.releaseCapture()
        }
        resize2.setCapture && resize2.setCapture()
        return false
      }
    }
  }
}