html 拖动中间件改变左右div的宽度

<script setup>
import {onMounted} from "vue";

const draggableWay = () => {
  let resize = document.getElementById('dra');
  let left = document.getElementById('leftContent');
  let right = document.getElementById('rightContent');
  let startX = 0
  let width = left.clientWidth;
  let is = false
  // 鼠标按下事件
  resize.addEventListener('mousedown', e => {
    // console.log(e,'mousedown')
    startX = e.clientX
    resize.style.background = '#1124a5';
    resize.left = resize.offsetLeft
    is = true
    resize.left = resize.offsetLeft
    // 鼠标拖动事件
    document.onmousemove = function (e) {
      let endX = e.clientX
      let afterPx = resize.left + (endX - startX) + 'px'
      left.style.width = afterPx
      right.style.width = "calc(100% - " + afterPx + ")"

    }
    // 鼠标松开事件
    document.onmouseup = function (evt) {
      //颜色恢复
      resize.style.background = '#d6d6d6'
      document.onmousemove = null
      document.onmouseup = null
      resize.releaseCapture && resize.releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
    }
    resize.setCapture && resize.setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
    return false
  })
}
onMounted(() => {
  draggableWay()
})
</script>

<template>
  <div class="box">
    <div id="leftContent"></div>
    <div id="dra"></div>
    <div id="rightContent"></div>
  </div>
</template>

<style scoped lang="less">
.box {
  display: flex;
  height: 100vh;
  align-items: center;
}

#leftContent {
  background-color: #999999;
  flex-shrink: 0;
  height: 100%;
  width: calc(50vw - 10px);
}

#dra {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: #9fa0ee;
}

#rightContent {
  flex-shrink: 0;
  height: 100%;
  width: calc(50vw - 10px);
  background-color: #ecb719;
}

</style>