div横向拖动 vue_Vue-div横向/纵向拖拽缩放

1.效果图：

2.Html部分

vue页面文件中

1

2

3

4 class="box"

5 ref="box"

6 >

7

8

9

10

11 class="resize"

12 title="左右侧边栏"

13 >⋮

14

15

16

17

18

19

20

21 title="上下侧边栏"

22 class="move"

23 >⋯

24

25

26

27

28

29

30

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页面文件中标签

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 }

标签：Vue,缩放,background,var,moveLen,div,document,resize,left

来源： https://www.cnblogs.com/grails/p/14021347.html