js 实现左右或上下div拖动改变宽高，类似codepen

原文链接实现了左右，此处就不做代码重复 codepen 中可以发现上面的代码部分可以左右拖动，上下也是可以拖动改变的 image.png 上代码 此处需要注意 codepen有一个 header，我们大概理解高度为 60px 使用了 vue 作为开发框架 不影响使用 export default { methods: { linkToHome() { this.$router.push({ name: "Home" }); }, resizeChange() { // 获取dom let resize = document.getElementById("resize"); let top = document.getElementById("code-container"); let bottom = document.getElementById("result-preview"); let box = document.getElementById("container-box"); resize.onmousedown = (e) => { let startY = e.clientY; // 此处减去header的60px resize.top = resize.offsetTop - 60; document.onmousemove = (e) => { let endY = e.clientY; let moveLen = resize.top + (endY - startY); let maxT = box.clientHeight - resize.offsetHeight; // 保留最小200的高度 if (moveLen < 200) moveLen = 200; if (moveLen > maxT - 200) moveLen = maxT - 200; resize.style.top = moveLen; top.style.height = moveLen + "px"; // 减去resize的高度10px bottom.style.height = box.clientHeight - moveLen - 10 + "px"; }; document.onmouseup = (evt) => { // 清除事件 document.onmousemove = null; document.onmouseup = null; // 鼠标捕获事件 resize.releaseCapture && resize.releaseCapture(); }; // 鼠标捕获事件 resize.setCapture && resize.setCapture(); return false; }; } }, mounted() { this.resizeChange(); } }; $--run-background-color: #1e1f26; $--run-border-color: #333642; .run-view-root { min-width: 1200px; width: 100%; height: 100%; .header { display: flex; align-items: center; justify-content: space-between; height: 60px; box-sizing: border-box; border-bottom: 1px solid $--run-border-color; background: $--run-background-color; .header-title { margin-left: 40px; } .header-back { margin-right: 40px; color: #fff; cursor: pointer; &:hover { text-decoration: underline; } } } .container { width: 100%; height: calc(100% - 60px); #code-container { display: flex; width: 100%; height: calc(50% - 5px); background: $--run-background-color; .code-text { width: 33.33%; border-right: 2px solid $--run-border-color; &:last-child { border: 0px; } } } #resize { width: 100%; height: 9px; background: $--run-border-color; border-bottom: 1px solid black; box-shadow: 0 0 1px black; cursor: s-resize; z-index: 999; } #result-preview { width: 100%; height: calc(50% - 5px); background: radial-gradient(circle, #444857, #2c303a); } } } 最终效果 此处只实现了上下的拖动，左右拖动可参考原文链接，都是同理 image.png 原文链接：实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围

本文章由javascript技术分享原创和收集