左右布局，可拖拽重新布局

先看效果：

左右布局可拖拽.gif

<div id="metadata-box">
  <div id="left">左边的div</div>
  <div id="middle"></div>
  <div id="right">右边的div</div>
</div>

  methods: {
    $dragControllerDiv() {
      // debugger
      const resizeBtn = document.getElementById('resize-btn')
      const left = document.getElementById('left')
      const middle = document.getElementById('middle')
      const right = document.getElementById('right')
      const box = document.getElementById('metadata-box')

      left.style.width = this.leftBoxWidth * 1 + 'px'
      right.style.width = (box.clientWidth - this.leftBoxWidth - 24) + 'px'

      resizeBtn.onmousedown = (resizeEvent) => {
        const startX = resizeEvent.clientX
        middle.left = middle.offsetLeft
        document.onmousemove = (documentEvent) => {
          const endX = documentEvent.clientX
          let moveLen = middle.left + (endX - startX)
          const maxT = box.clientWidth - middle.offsetWidth
          if (moveLen < 200) moveLen = 200
          if (moveLen > maxT - 500) moveLen = maxT - 500
          left.style.width = moveLen + 'px'
          right.style.width = (box.clientWidth - moveLen - 24) + 'px'
        }
        document.onmouseup = () => {
          document.onmousemove = null
          document.onmouseup = null
          setItem('metaDataLeftBoxWidth', left.clientWidth)
          if (resizeBtn.releaseCapture) resizeBtn.releaseCapture()
        }
        if (resizeBtn.setCapture) resizeBtn.setCapture()
        return false
      }
    }
  },
  mounted() {
    this.$dragControllerDiv()
  },
  created() {
    this.leftBoxWidth = getItem('metaDataLeftBoxWidth') || 360
  }