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 }