Vue---拖动侧边栏改变div宽度

任务描述

实现左右拖拽布局功能:当拖动分割线时,可以重置左右两侧模块宽度实现宽度自定义。

首先搞清楚几个值的概念
(1)clientX 与 clientWidth
clientX:鼠标点击时位置距离当前body可视区域的x坐标
clientWidth:

(2)left
相对于具有定位属性(position定义为relative)的父对象 的左边距

(3)offsetLeft 与 offsetWidth
offsetLeft:当前元素距父元素左侧的值
offsetWidth: 元素的width+元素的padding+边框的宽度

(这部分网上有很多图示详解,不懂得可以去学习一下)

整体思路
(1)按下鼠标时,获取当前点击位置距离当前body的位置
(2)移动该鼠标时,计算左边div的距离,
计算公式是 = 原先左边div的距离 + 最后鼠标的位置 - 起始鼠标的位置
(3)在容错处理上,设置了可移动的最大距离,防止宽度溢出。

上代码







(欢迎交流以及指正我的错误)

你可能感兴趣的:(Vue---拖动侧边栏改变div宽度)