vue实现可拖拽div大小的方法
时间：2022-06-01 11:25:10 | 栏目：vue | 点击：次
下面看下vue中可拖拽div大小的方法。
可封装为全局方法在项目中所需要地方直接调用（mixins）
方法：
参数：
1.allBox：最外层第div class；
2.leftBox：最左层第div class；
3.resizeBox：中间div class；
4.rightBox：最右层第div class；
leftMin /rightMin 距离左右2侧最小距离；
leftBox，resizeBox，rightBox设置宽度均需float;
*若是在内部容器中，须在最外层添加position: relative,否则会引起跳动，计算距离错误
dragDiv(allBox, leftBox, resizeBox, rightBox, leftMin = 200, rightMin = 200) {
var box = document.getElementsByClassName(allBox);
var left = document.getElementsByClassName(leftBox);
var resize = document.getElementsByClassName(resizeBox);
var right = document.getElementsByClassName(rightBox);
for(let i = 0; i < resize.length; i++) {
// 鼠标按下事件
resize[i].onmousedown = function(e) {
// 颜色改变提醒
resize[i].style.background = '#818181';
var startX = e.clientX;
resize[i].left = resize[i].offsetLeft;
// 鼠标拖动事件
document.onmousemove = function(e) {
var endX = e.clientX;
var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
if(moveLen < leftMin) moveLen = leftMin;
if(moveLen > maxT - rightMin) moveLen = maxT - rightMin;
resize[i].style.left = moveLen; // 设置左侧区域的宽度
for(let j = 0; j < left.length; j++) {
left[j].style.width = moveLen + 'px';
right[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
}
};
// 鼠标松开事件
document.onmouseup = function(evt) {
// 颜色恢复
resize[i].style.background = '#d6d6d6';
document.onmousemove = null;
document.onmouseup = null;
resize[i].releaseCapture && resize[i].releaseCapture(); // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
resize[i].setCapture && resize[i].setCapture(); // 该函数在属于当前线程的指定窗口里设置鼠标捕获
return false;
};
}
},
补充：vue中的可拖拽宽度div
主要思路
- 在需要拖拽宽度的区域设置一个div，高度设为 100%，宽度尽量窄一些(也不要太窄，3～6px左右)
- 在此div上绑定当“鼠标按下”时，触发document绑定“鼠标移动”方法和"鼠标抬起"方法
- 通过鼠标移动方法不断获取当前鼠标位置，设置需要变化大小div的宽高。
- 鼠标抬起时取消鼠标移动方法和鼠标抬起方法的绑定。
<template>
<div class="container" id="content_box">
<div class="tab">左侧Tab</div>
<div class="menu" ref="menu">
左侧菜单
<div class="menu-resize" ref="menuResize"></div>
</div>
<div class="content">
中心区域
<div class="opera" ref="opera">
<div class="opera-resize" ref="operaResize"></div>
操作区域
</div>
</div>
</template>
<script>
export default {
name: "dropWidth",
mounted() {
this.$nextTick(() => {
this.dropSize();
})
},
methods: {
dropSize() {
let that = this,
menuWidth = 200,
operaHeight = 200;
this.$refs.menuResize.onmousedown = function () {
document.onmousemove = function (e) {
let clientX = e.clientX;
// 最大宽度
if(clientX>=330){
clientX = 330;
}
// 最小宽度
if(clientX<=230){
clientX = 230;
// TODO 这里减的是最左侧tab的宽度
menuWidth = clientX - 30;
that.$refs.menu.style.width = clientX - 30 +"px";
}
document.onmouseup = function () {
console.log('当前宽度', menuWidth);
document.onmousemove = null;
document.onmouseup = null;
that.releaseCapture && that.releaseCapture()
}
this.$refs.operaResize.onmousedown = function () {
let clientY = e.clientY;
console.log(clientY)
if(clientY<=100){
clientY = 100;
if(clientY>=300){
clientY = 300;
operaHeight = clientY;
// TODO 这里需要取反向
that.$refs.opera.style.height = 400 - clientY +"px";
console.log('当前宽度', operaHeight);
}
}
}
</script>
<style scoped>
.container {
width: 1000px;
height: 400px;
border: 2px solid #dddddd;
display: flex;
justify-content: center;
.tab {
width: 30px;
height: 100%;
background-color: #EC8C32;
flex-shrink: 0;
flex-grow: 0;
.menu {
width: 200px;
background-color: #AAB6E0;
position: relative;
.content {
width: 100%;
.opera {
height: 200px;
position: absolute;
bottom: 0;
background-color: #F2BE25;
.menu-resize {
width: 5px;
top: 0;
right: 0;
cursor: col-resize;
.opera-resize {
height: 5px;
left: 0;
cursor: row-resize;
</style>
实现效果
