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