任务描述
实现左右拖拽布局功能:当拖动分割线时,可以重置左右两侧模块宽度实现宽度自定义。
首先搞清楚几个值的概念
(1)clientX
clientX:鼠标点击时位置距离当前body可视区域的x坐标
(2)left
相对于具有定位属性(position定义为relative)的父对象 的左边距
(3)offsetLeft 与 offsetWidth
offsetLeft:当前元素距父元素左侧的值
offsetWidth: 元素的width+元素的padding+边框的宽度
(这部分网上有很多图示详解,不懂得可以去学习一下)
整体思路
(1)按下鼠标时,获取当前点击位置距离当前body的位置
(2)移动该鼠标时,计算左边div的距离,
计算公式是 = 原先左边div的距离 + 最后鼠标的位置 – 起始鼠标的位置
(3)在容错处理上,设置了可移动的最大距离,防止宽度溢出。
代码
<template>
<div id="box">
<div class="top">顶部导航</div>
<div id="left"> 左边的div
<svg width="100%" id="controllerSvg" ></svg>
</div>
<div id="resize"></div>
<div id="right" style="border-top: 1px solid #b5b9a9; ">右边的div
<!-- <svg width="100%" height="auto" id="serverSvg" ></svg>-->
</div>
<p></p>
</div>
</template>
<script>
export default {
name: 'change',
methods: {
dragControllerDiv: function () {
let resize = document.getElementById('resize')
let left = document.getElementById('left')
let right = document.getElementById('right')
let box = document.getElementById('box')
resize.onmousedown = function (e) {
let startX = e.clientX
resize.left = resize.offsetLeft
document.onmousemove = function (e) {
let endX = e.clientX
let moveLen = resize.left + (endX - startX)
let maxT = box.clientWidth - resize.offsetWidth
if (moveLen < 150) moveLen = 360
if (moveLen > maxT - 800) moveLen = maxT - 800
resize.style.left = moveLen
left.style.width = moveLen + 'px'
right.style.width = (box.clientWidth - moveLen - 5) + 'px'
}
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
resize.releaseCapture && resize.releaseCapture()
}
resize.setCapture && resize.setCapture()
return false
}
}
},
mounted () {
this.dragControllerDiv()
}
}
</script>
<style scoped>
#box{
width:100%;
height:400px;
position: relative;
overflow:hidden;
}
.top {
width: 100%;
height: 80px;
background: #ffe0c6;
}
#left{
width:calc(30% - 5px);
height: 100%;
float:left;
overflow: auto;
background: pink;
}
#resize{
position: relative;
width:5px;
height:100%;
cursor: w-resize;
float:left;
}
#right{
width:70%;
height:100%;
float:left;
overflow: hidden;
background: #ffc5c1;
}
</style>
(欢迎交流以及指正我的错误)