猿问
下载APP

vue 左右拖动div改变其宽度

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

Zoe_z
浏览 1301回答 1
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>
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答