Vuejs通过拖动改变元素宽度实现自适应

Vuejs通过拖动改变元素宽度实现自适应

473
2020-09-10 10:34:07

这篇文章主要介绍了Vuejs通过拖动改变元素宽度实现自适应,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

需求:

Vuejs通过拖动改变元素宽度实现自适应 (https://www.wpmee.com/) javascript教程 第1张

原理:

拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时,计算元素框mid和right;同时设置元素框最小值以防止元素框拖没了(其实是被遮住了)。使用SetCapture() 和 ReleaseCapture()的函数功能指定窗口里设置鼠标捕获。

html部分代码:

<template>

<div>

<ul class="box" ref="box">

<li class="left" ref="left">西瓜</li>

<li class="resize" ref="resize"></li>

<li class="mid" ref="mid">备注2</li>

<li class="resize2" ref="resize2"></li>

<li class="right" ref="right">test</li>

</ul>

<ul class="box" ref="box">

<li class="left" ref="left">芒果</li>

<li class="resize" ref="resize"></li>

<li class="mid" ref="mid">备注</li>

<li class="resize2" ref="resize2"></li>

<li class="right" ref="right">test</li>

</ul>

</div>

</template>

js部分代码:

<script>

export default {

mounted () {

this.dragControllerDiv();

},

methods: {

dragControllerDiv: function () {

var resize = document.getElementsByClassName('resize');

var resize2 = document.getElementsByClassName('resize2');

var left = document.getElementsByClassName('left');

var right = document.getElementsByClassName('right');

var mid = document.getElementsByClassName('mid');

var box = document.getElementsByClassName('box');

for (let i = 0; i < resize.length; i++) {

resize[i].onmousedown = function (e) {

var startX = e.clientX;

resize[i].left = resize[i].offsetLeft;

document.onmousemove = function (e) {

var endX = e.clientX;

var rightW = right[i].offsetWidth;

var moveLen = resize[i].left + (endX - startX);

var maxT = box[i].clientWidth - resize[i].offsetWidth;

if (moveLen < 150) moveLen = 150;

if (moveLen > maxT - rightW - 150) moveLen = maxT - rightW - 150;

resize[i].style.left = moveLen;

for (let j = 0; j < left.length; j++) {

left[j].style.width = moveLen + 'px';

mid[j].style.width = (box[i].clientWidth - moveLen - rightW - 10) + 'px';

}

}

document.onmouseup = function (evt) {

document.onmousemove = null;

document.onmouseup = null;

resize[i].releaseCapture && resize[i].releaseCapture();

}

resize[i].setCapture && resize[i].setCapture();

return false;

}

}

for (let i = 0; i < resize2.length; i++) {

resize2[i].onmousedown = function (e) {

var startX = e.clientX;

resize2[i].left = resize2[i].offsetLeft;

document.onmousemove = function (e) {

var endX = e.clientX;

var leftW = left[i].offsetWidth;

var moveLen = resize2[i].left + (endX - startX) - leftW;

var maxT = box[i].clientWidth - resize2[i].offsetWidth - 5;

if (moveLen < 150) moveLen = 150;

if (moveLen > maxT - leftW - 150) moveLen = maxT - leftW - 150;

resize2[i].style.left = moveLen;

for (let j = 0; j < right.length; j++) {

mid[j].style.width = moveLen + 'px';

right[j].style.width = (box[i].clientWidth - moveLen - leftW - 10) + 'px';

}

}

document.onmouseup = function (evt) {

document.onmousemove = null;

document.onmouseup = null;

resize2[i].releaseCapture && resize2[i].releaseCapture();

}

resize2[i].setCapture && resize2[i].setCapture();

return false;

}

}

}

}

}

</script>

style部分:

<style scoped>ul,li{list-style: none;display: block;

margin:0;

padding:0;

}

.box{width:800px;height:32px;overflow:hidden;

}

.left{ width:calc(30% - 10px); height:100%; background:skyblue;

float:left;

}

.resize{width:5px; height:100%; cursor: w-resize; float:left;

}

.resize2{ width:5px;height:100%; cursor: w-resize; float:left;

}

.right{float:left; width:35%; height:100%; background:tomato;

}

.mid{ float:left; width:35%; height:100%;background:#f00;

}

</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

Vuejs通过拖动改变元素宽度实现自适应 (https://www.wpmee.com/) javascript教程 第2张

喜欢这个文章就点个赞分享给好友吧~

END

发表评论

一次支付终身使用
免费版本更新
靠谱的技术支持
成为会员