首页 / WordPress函数讲解 / Vuejs通过拖动改变元素宽度实现自适应

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

    • 珂李斯

    发布于

    by

    这篇文章主要介绍了Vuejs通过拖动改变元素宽度实现自适应,文中通过示例代码介绍的非常详细，对大家的学习或者工…

    这篇文章主要介绍了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张

    类别：WordPress函数讲解、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！