效果图：

js拖拽分割屏幕

项目中需要实现一个通过鼠标拖动动态调整两侧容器的大小，记录一下

直接上代码，备注详解，这个demo是用vue写的

<template>
  <div class="about" id="about">
    <div id="leftArea" class="left-area" :style="'width:'+leftWidth"></div>
    <!-- 防止拖动的产生 -->
    <div class="resizer" @mousedown.prevent="onMouseDown"></div>
    <div id="rightArea" class="right-area"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false, // 拖动中flag
      leftWidth: "500px",
      bodyDom: null,
    };
  },
  mounted() {
    this.bodyDom = document.getElementById("about");
  },
  methods: {
    onMouseDown(e) {
      this.isDragging = true;
      this.leftWidth = e.target.offsetLeft + "px";
      this.bodyDom.style.cursor = "col-resize";  // 设置鼠标样式
      this.setAreaZindex(-1);
      this.initMoveEvent();
    },
    // 添加鼠标移动、松开事件监听
    initMoveEvent() {
      this.bodyDom.addEventListener("mousemove", this.mouseMoveFun);
      this.bodyDom.addEventListener("mouseup", this.mouseUpFun);
    },
    // 移除移动事件监听
    removeMoveEvent() {
      this.bodyDom.removeEventListener("mousemove", this.mouseMoveFun);
      this.bodyDom.removeEventListener("mouseup", this.mouseUpFun);
      /**
        removeEventListener定义和用法
        removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。
        注意： 如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如上实例所示 (myFunction)。
        匿名函数，类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的。
      **/
    },
    // 鼠标移动方法
    mouseMoveFun(e) {
      if (!this.isDragging) return;
      this.leftWidth = e.layerX + "px";
    },
    // 鼠标松开方法
    mouseUpFun(e) {
      this.isDragging = false;
      this.bodyDom.style.cursor = "default";  // 还原鼠标样式
      this.setAreaZindex(1);
      this.removeMoveEvent();
    },

    // 设置左右两侧的zindex，防止误操作
    setAreaZindex(zIndex) {
      document.getElementById("leftArea").style.zIndex = zIndex;
      document.getElementById("rightArea").style.zIndex = zIndex;
    },
  },
};
</script>
<style scoped>
.about {
  display: flex;
  height: 100%;
  position: relative;
}
.left-area {
  background: rgb(62, 65, 62);
}
.right-area {
  background: rgb(156, 148, 148);
  flex-grow: 1;
}
.resizer {
  background: #444857;
  width: 10px;
  height: 100%;
  cursor: col-resize;
}
</style>

欢迎指出错漏，欢迎技术交流，不喜勿喷

js拖拽调整两侧容器大小

js拖拽分割屏幕