vue 手动调节上下左右
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 | < template > < div class="Drag2"> < div class="box" ref="box"> < div class="topBox"> < div class="left"> sdjklsajdasljdlaskdj </ div > < div class="resize" title="左右侧边栏">⋮</ div > < div class="mid"> asdjasljdlaskjdasljdas</ div > </ div > < div title="上下侧边栏" class="move">⋯</ div > < div class="downBox"> asjdlasjdaskjdasjdlasl </ div > </ div > </ div > </ template > < script > export default { mounted () { this.dragControllerLR() this.dragControllerUD() }, methods: { // 左右拖动事件 dragControllerLR () { const resize = document.getElementsByClassName('resize') const left = document.getElementsByClassName('left') const mid = document.getElementsByClassName('mid') const box = document.getElementsByClassName('topBox') console.log(document.getElementsByClassName('resize')) for (let i = 0; i < resize.length ; i++) { // 鼠标按下事件 resize[i].onmousedown = function (e) { // 颜色改变提醒 resize[i].style.background = '#818181' const startX = e.clientX resize[i].left = resize[i].offsetLeft // 鼠标拖动事件 document.onmousemove = function (e) { const endX = e.clientX let moveLen = resize[i].left + (endX - startX) // (endx-startx)=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度 const maxT = box[i].clientWidth - resize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度 if (moveLen < 50) moveLen = 50 // 左边区域的最小宽度为50px if (moveLen > maxT - 150) moveLen = maxT - 150 // 右边区域最小宽度为150px 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 - 10 + 'px' } } // 鼠标松开事件 // eslint-disable-next-line no-unused-vars document.onmouseup = function (evt) { // 颜色恢复 resize[i].style.background = '#d6d6d6' document.onmousemove = null document.onmouseup = null resize[i].releaseCapture && resize[i].releaseCapture() // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉 } resize[i].setCapture && resize[i].setCapture() // 该函数在属于当前线程的指定窗口里设置鼠标捕获 return false } } }, // 上下拖动事件 dragControllerUD () { const resize = document.getElementsByClassName('move') const topBox = document.getElementsByClassName('topBox') const topLeft = document.getElementsByClassName('left') const topRigtt = document.getElementsByClassName('mid') const downBox = document.getElementsByClassName('downBox') const box = document.getElementsByClassName('box') console.log(document.getElementsByClassName('move')) for (let i = 0; i < resize.length; i++) { // 鼠标按下事件 resize[i].onmousedown = function (e) { console.log(resize[i].top) // 颜色改变提醒 resize[i].style.background = '#818181' const startY = e.clientY resize[i].top = resize[i].offsetTop // 鼠标拖动事件 document.onmousemove = function (e) { const endY = e.clientY let moveLen = resize[i].top + (endY - startY) // (endY - startY)=移动的距离。resize[i].top+移动的距离=上边区域最后的高度 const maxT = box[i].clientHeight - resize[i].offsetHeight // 容器高度 - 上边区域的高度 = 下边区域的高度 if (moveLen < 50) moveLen = 50 // 上边区域的最小高度为50px if (moveLen > maxT - 150) moveLen = maxT - 150 // 下边区域最小高度为150px resize[i].style.top = moveLen // 设置上边区域的高度 for (let j = 0; j < topBox.length ; j++) { topBox[j].style.height = moveLen + 'px' topLeft[j].style.height = moveLen + 'px' topRigtt[j].style.height = moveLen + 'px' downBox[j].style.height = box[i].clientHeight - moveLen - 10 + 'px' } } // 鼠标松开事件 document.onmouseup = function () { // 颜色恢复 resize[i].style.background = '#d6d6d6' document.onmousemove = null document.onmouseup = null resize[i].releaseCapture && resize[i].releaseCapture() // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉 } resize[i].setCapture && resize[i].setCapture() // 该函数在属于当前线程的指定窗口里设置鼠标捕获 return false } } } } } </script> < style > /* 拖拽相关样式 */ /*包围div样式*/ .box { height: 100vh; width: calc(98vh - 10px); margin: 1% 0px; overflow: hidden; box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11); } /*左侧div样式*/ .left { width: calc(32% - 10px); /*左侧初始化宽度*/ background: #71ad88; float: left; } /* 拖拽区div样式 */ .resize { cursor: w-resize; float: left; position: relative; top: 45%; background-color: #d6d6d6; border-radius: 5px; width: 10px; height: 50px; background-size: cover; background-position: center; /*z-index: 99999;*/ font-size: 32px; color: white; } /*拖拽区鼠标悬停样式*/ .move:hover { color: #444444; } /*右侧div'样式*/ .mid { float: left; width: 68%; /*右侧初始化宽度*/ background: #f3f3f3; box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11); /*上方div'样式*/ .topBox { width: 100%; height: 60%; background-color: #3ff53f; display: flex; } /*下方div'样式*/ .downBox { width: 100%; height: calc(40% - 10px); background-color: #f0fd35; display: flex; } /* 拖拽区div样式 */ .move { cursor: s-resize; width: 100%; height: 10px; background-color: #d6d6d6; margin: 0 auto; border-radius: 5px; text-align: center; line-height: 3px; font-size: 32px; color: white; } /*拖拽区鼠标悬停样式*/ .move:hover { color: #444444; } } </ style > |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)