Vue-div橫向/縱向拖拽縮放
阿新 • • 發佈：2020-11-22
1.效果圖：
2.Html部分
vue頁面檔案中
1 <template> 2 <div class="Drag2"> 3 <div 4 class="box" 5 ref="box" 6 > 7 <div class="left"> 8 <!--左側div內容--> 9 </div> 10 <div 11 class="resize" 12 title="左右側邊欄" 13>⋮</div> 14 <div class="mid"> 15 <!--右側div內容--> 16 17 <div class="topBox"> 18 <!--右上div內容--> 19 </div> 20 <div 21 title="上下側邊欄" 22 class="move" 23 >⋯</div> 24 <div class="downBox"> 25<!--右下div內容--> 26 </div> 27 </div> 28 </div> 29 </div> 30 </template>
3.Js部分
vue頁面檔案methods方法區中
1 // 左右拖動事件 2 dragControllerLR: function() { 3 var resize = document.getElementsByClassName('resize') 4 var left = document.getElementsByClassName('left')5 var mid = document.getElementsByClassName('mid') 6 var box = document.getElementsByClassName('box') 7 console.log(document.getElementsByClassName('resize')); 8 for (let i = 0; i < resize.length; i++) { 9 // 滑鼠按下事件 10 resize[i].onmousedown = function(e) { 11 //顏色改變提醒 12 resize[i].style.background = '#818181' 13 var startX = e.clientX 14 resize[i].left = resize[i].offsetLeft 15 // 滑鼠拖動事件 16 document.onmousemove = function(e) { 17 var endX = e.clientX 18 var moveLen = resize[i].left + (endX - startX) // （endx-startx）=移動的距離。resize[i].left+移動的距離=左邊區域最後的寬度 19 var maxT = box[i].clientWidth - resize[i].offsetWidth // 容器寬度 - 左邊區域的寬度 = 右邊區域的寬度 20 21 if (moveLen < 50) moveLen = 50 // 左邊區域的最小寬度為50px 22 if (moveLen > maxT - 150) moveLen = maxT - 150 //右邊區域最小寬度為150px 23 24 resize[i].style.left = moveLen // 設定左側區域的寬度 25 26 for (let j = 0; j < left.length; j++) { 27 left[j].style.width = moveLen + 'px' 28 mid[j].style.width = box[i].clientWidth - moveLen - 10 + 'px' 29 } 30 } 31 // 滑鼠鬆開事件 32 // eslint-disable-next-line no-unused-vars 33 document.onmouseup = function(evt) { 34 //顏色恢復 35 resize[i].style.background = '#d6d6d6' 36 document.onmousemove = null 37 document.onmouseup = null 38 resize[i].releaseCapture && resize[i].releaseCapture() //當你不在需要繼續獲得滑鼠訊息就要應該呼叫ReleaseCapture()釋放掉 39 } 40 resize[i].setCapture && resize[i].setCapture() //該函式在屬於當前執行緒的指定窗口裡設定滑鼠捕獲 41 return false 42 } 43 } 44 }, 45 // 上下拖動事件 46 dragControllerUD: function() { 47 var resize = document.getElementsByClassName('move') 48 var topBox = document.getElementsByClassName('topBox') 49 var downBox = document.getElementsByClassName('downBox') 50 var box = document.getElementsByClassName('mid') 51 console.log(document.getElementsByClassName('move')); 52 for (let i = 0; i < resize.length; i++) { 53 // 滑鼠按下事件 54 resize[i].onmousedown = function(e) { 55 console.log(resize[i].top); 56 //顏色改變提醒 57 resize[i].style.background = '#818181' 58 var startY = e.clientY 59 resize[i].top = resize[i].offsetTop 60 // 滑鼠拖動事件 61 document.onmousemove = function(e) { 62 var endY = e.clientY 63 var moveLen = resize[i].top + (endY - startY) // （endY - startY）=移動的距離。resize[i].top+移動的距離=上邊區域最後的高度 64 var maxT = box[i].clientHeight - resize[i].offsetHeight // 容器高度 - 上邊區域的高度 = 下邊區域的高度 65 66 if (moveLen < 50) moveLen = 50 // 上邊區域的最小高度為50px 67 if (moveLen > maxT - 150) moveLen = maxT - 150 //下邊區域最小高度為150px 68 69 resize[i].style.top = moveLen// 設定上邊區域的高度 70 71 for (let j = 0; j < topBox.length; j++) { 72 topBox[j].style.height = moveLen + 'px' 73 downBox[j].style.height = box[i].clientHeight - moveLen - 10 + 'px' 74 } 75 } 76 // 滑鼠鬆開事件 77 document.onmouseup = function() { 78 //顏色恢復 79 resize[i].style.background = '#d6d6d6' 80 document.onmousemove = null 81 document.onmouseup = null 82 resize[i].releaseCapture && resize[i].releaseCapture() //當你不在需要繼續獲得滑鼠訊息就要應該呼叫ReleaseCapture()釋放掉 83 } 84 resize[i].setCapture && resize[i].setCapture() //該函式在屬於當前執行緒的指定窗口裡設定滑鼠捕獲 85 return false 86 } 87 } 88 },
4.css部分
vue頁面檔案中<style> </style>標籤
1 /*包圍div樣式*/ 2 .box { 3 width: 100%; 4 height: calc(98vh - 10px); 5 margin: 1% 0px; 6 overflow: hidden; 7 box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11); 8 } 9 /*左側div樣式*/ 10 .left { 11 width: calc(32% - 10px); /*左側初始化寬度*/ 12 height: 100%; 13 background: #71ad88; 14 float: left; 15 } 16 /* 拖拽區div樣式 */ 17 .resize { 18 cursor: w-resize; 19 float: left; 20 position: relative; 21 top: 45%; 22 background-color: #d6d6d6; 23 border-radius: 5px; 24 margin-top: -10px; 25 width: 10px; 26 height: 50px; 27 background-size: cover; 28 background-position: center; 29 /*z-index: 99999;*/ 30 font-size: 32px; 31 color: white; 32 } 33 34 /*拖拽區滑鼠懸停樣式*/ 35 .move:hover { 36 color: #444444; 37 } 38 /*右側div'樣式*/ 39 .mid { 40 float: left; 41 width: 68%; /*右側初始化寬度*/ 42 height: 100%; 43 background: #f3f3f3; 44 box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11); 45 /*上方div'樣式*/ 46 .topBox { 47 height: 60%; 48 background-color: #3ff53f; 49 display: flex; 50 } 51 /*下方div'樣式*/ 52 .downBox { 53 height: calc(40% - 10px); 54 background-color: #f0fd35; 55 display: flex; 56 } 57 /* 拖拽區div樣式 */ 58 .move { 59 cursor: s-resize; 60 width: 50px; 61 height: 10px; 62 background-color: #d6d6d6; 63 margin: 0 auto; 64 border-radius: 5px; 65 text-align: center; 66 line-height: 3px; 67 font-size: 32px; 68 color: white; 69 } 70 /*拖拽區滑鼠懸停樣式*/ 71 .move:hover { 72 color: #444444; 73 } 74 }