自在驾驭左右 div 宽度：Vue 拖拽调整的神奇操作

前端

2023-11-14 01:10:27

左右分屏布局的奥妙

在现代 web 设计中，左右分屏布局已成为一种流行且实用的选择。它不仅能优化信息展示，还能提升用户交互体验。然而，当我们需要动态调整左右分屏的宽度比例时，就需要借助拖拽功能的帮助了。

Vue 的拖拽魔力

Vue.js，一个备受欢迎的前端框架，提供了丰富的功能，其中就包括拖拽操作。通过利用 Vue 的事件监听和数据绑定特性，我们可以轻松实现左右 div 的拖拽调整。

原理解析

拖拽调整左右 div 的原理并不复杂：

监听中间分隔条上的鼠标按下事件。
记录鼠标按下的位置（横坐标）。
在鼠标移动过程中，计算并更新左右 div 的宽度，使之与鼠标移动的距离成正比。
当鼠标松开时，停止宽度调整。

代码实现

以下是使用 Vue 实现拖拽调整左右 div 宽度的方法：

<template>
  <div class="container">
    <div class="left-div" ref="leftDiv"></div>
    <div class="resizer" @mousedown="startResizing"></div>
    <div class="right-div" ref="rightDiv"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      initialMouseX: null, // 初始鼠标按下时的横坐标
      isResizing: false, // 是否正在调整大小
    };
  },
  methods: {
    startResizing(event) {
      // 记录初始鼠标按下时的横坐标
      this.initialMouseX = event.clientX;
      // 标记开始调整大小
      this.isResizing = true;
      // 监听鼠标移动事件
      window.addEventListener('mousemove', this.onResizing);
      // 监听鼠标松开事件
      window.addEventListener('mouseup', this.stopResizing);
    },
    onResizing(event) {
      if (!this.isResizing) return;
      // 计算并更新左右 div 的宽度
      const leftWidth = event.clientX - this.initialMouseX;
      this.$refs.leftDiv.style.width = `${leftWidth}px`;
      this.$refs.rightDiv.style.width = `calc(100% - ${leftWidth}px)`;
    },
    stopResizing() {
      // 标记停止调整大小
      this.isResizing = false;
      // 移除鼠标移动事件监听
      window.removeEventListener('mousemove', this.onResizing);
      // 移除鼠标松开事件监听
      window.removeEventListener('mouseup', this.stopResizing);
    },
  },
};
</script>

<style>
.container {
  display: flex;
  height: 100vh;
}
.left-div, .right-div {
  flex: 1;
}
.resizer {
  cursor: col-resize;
  width: 5px;
  background-color: #ccc;
}
</style>