记录拖拽改变布局比例

埋葬荒城

已于 2024-01-02 15:21:30 修改

阅读量555

点赞数 9

CC 4.0 BY-SA版权

文章标签：前端 javascript html

于 2023-12-27 14:14:28 首次发布

本文链接：https://blog.csdn.net/tian19920813/article/details/135240161

实现目标

实现过程

首先需要实现，鼠标放上去时展示拖拽线，此处用css伪元素就可以实现。

.column-resize {
  width: 17px;
  background-color: transparent;
  position: relative;

  &:hover {
    cursor: col-resize;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 7px;
      width: 3px;
      height: 100%;
      background-color: #0500fe;
    }
  }
}

鼠标移入并按下时，触发拖拽事件：

<!-- 左侧区域 -->
<div :style="{ width: `calc(100% - ${blocksWrapRightWidth + 17}px)` }">
  <!-- 一些代码 -->
</div>
<!-- 拖动条 -->
<div class="column-resize" @mousedown="colResizeMouseDown" />
<!-- 右侧区域 -->
<div :style="{ width: blocksWrapRightWidth + 'px' }">
  <!-- 一些代码 -->
</div>

const scrollWidth = ref(0) // 记录鼠标拖动的距离
let mousePageX = 0 // 记录鼠标拖动的起始位置
const blocksWrapRightWidth = ref(360) // 右侧区域的宽度
let tempBlocksWrapRightWidth = 360

// 鼠标按下时触发
const colResizeMouseDown = (e: MouseEvent) => {
  e.preventDefault()
  // 记录鼠标在页面的位置
  mousePageX = e.pageX
  // 记录现在右侧区域的位置
  tempBlocksWrapRightWidth = blocksWrapRightWidth.value
  // 添加监听鼠标拖动事件
  document.addEventListener('mousemove', colResizeMouseMove)
}

// 鼠标拖动时改变区域宽度
const colResizeMouseMove = (e: MouseEvent) => {
  e.stopPropagation()
  // 记录鼠标移动的距离
  scrollWidth.value = e.pageX - mousePageX
  mousePageX = e.pageX
  // 提前计算出改变后各区域的宽度，如果没有超过限制就采用tempBlocksWrapRightWidth
  // 如果超过限制，就设置成极限值
  tempBlocksWrapRightWidth = tempBlocksWrapRightWidth - scrollWidth.value
  if (tempBlocksWrapRightWidth <= 345) {
    blocksWrapRightWidth.value = 345
  } else if (tempBlocksWrapRightWidth >= 600) {
    blocksWrapRightWidth.value = 600
  } else {
    blocksWrapRightWidth.value = tempBlocksWrapRightWidth
  }
}

页面监听mouseup事件：

onMounted(() => {
  document.addEventListener('mouseup', handleMouseUp)
})

const handleMouseUp = () => {
  document.removeEventListener('mousemove', colResizeMouseMove)
}

onBeforeUnmount(() => {
  document.removeEventListener('mouseup', handleMouseUp)
})

这样就大功告成啦！