为了账号安全,请及时绑定邮箱和手机立即绑定

vue 左右拖动div改变其宽度

/ 猿问

vue 左右拖动div改变其宽度

Zoe_z 2020-03-25 12:26:07

vue 左右拖动div改变其宽度,有大神提供一下代码吗?

查看完整描述

1 回答

已采纳
?
大米稀饭小米粥


<!DOCTYPE html>

<html>

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>div拖动</title>

    <style>

        body,

        html {

            margin: 0;

            padding: 0;

            height: 100%;

        } 

        #box {

            width: 100vw;

            height: 100vh;

            overflow: hidden;

        } 

        #left {

            width: calc(30% - 5px);

            height: 100%;

            background: #8000FF;

            float: left;

        } 

        #resize {

            width: 5px;

            height: 100%;

            cursor: w-resize;

            float: left;

        }

        #right {

            float: right;

            width: 70%;

            height: 100%;

            background: #19FF00;

        }

    </style>

</head>

 

<body>

    <div id="box">

        <div id="left"></div>

        <div id="resize"></div>

        <div id="right"></div>

    </div>

    <script>

        window.onload = function () {

            var resize = document.getElementById("resize");

            var left = document.getElementById("left");

            var right = document.getElementById("right");

            var box = document.getElementById("box");

            resize.onmousedown = function (e) {

                var startX = e.clientX;

                resize.left = resize.offsetLeft;

                document.onmousemove = function (e) {

                    var endX = e.clientX; 

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

                    var maxT = box.clientWidth - resize.offsetWidth;

                    if (moveLen < 150) moveLen = 150;

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

                    resize.style.left = moveLen;

                    left.style.width = moveLen + "px";

                    right.style.width = (box.clientWidth - moveLen - 5) + "px";

                }

                document.onmouseup = function (evt) {

                    document.onmousemove = null;

                    document.onmouseup = null;

                    resize.releaseCapture && resize.releaseCapture();

                }

                resize.setCapture && resize.setCapture();

                return false;

            }

        }

    </script>

</body>

</html>

查看完整回答
反对 回复 2020-03-26

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信