最新公告
  • 欢迎您光临奇兔源码社区,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 这篇文章主要介绍了Vuejs通过拖动改变元素宽度实现自适应,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    需求:

    原理:

    拖动效果的实现基本都是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>

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

    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,请不要用于商业用途!
    3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,默认解压密码为"www.qitupic.com",如遇到无法解压的请联系管理员!

    成华区美乐滋网络工作室|奇兔源码网 » Vuejs通过拖动改变元素宽度实现自适应

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    站壳网
    一个高级程序员模板开发平台