Vue-div横向/纵向拖拽缩放

1.效果图:Vue-div横向/纵向拖拽缩放

 

 

 

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 }

 

上一篇:CSS3 用户界面


下一篇:html1