动态拖动两个div的宽度
效果
初始化宽度：
拖动中间黄色的改变大小
在html中写法(使用jquery)
如果没有jq，在html中也能使用js，将拖动的方法换成vue里面的就可以
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 注意引入jquery -->
<script type="application/javascript" src="./js/jquery-3.2.1.js"></script>
</head>
<body>
<div id="div">
<div id="div1">
字母和数字键的键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57
</div>
<div id="div2"></div>
<div id="div3">
数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
0 96 8 104 F1 112 F7 118
1 97 9 105 F2 113 F8 119
2 98 * 106 F3 114 F9 120
3 99 + 107 F4 115 F10 121
4 100 Enter 108 F5 116 F11 122
5 101 - 109 F6 117 F12 123
6 102 . 110
7 103 / 111
</div>
</div>
</body>
<script type="application/javascript">
$(function() {
$("#div2").mousedown(function(e) {
// 父级框的宽度
let divWidth = $("#div").width();
//添加鼠标移动事件
document.onmousemove = function(e) {
// 防止链接打开 URL
e.preventDefault();
// e.clientX是鼠标指针相对于浏览器页面（或客户区）的水平坐标
// 可以理解为鼠标距离屏幕左侧的距离
// 当鼠标距离左面大于300和鼠标位置小于父级总长度-220
//就是控制左面和右边两个的最小宽度
if (e.clientX > 300 && e.clientX < (divWidth - 220)) {
//设置左面的大小
$("#div1").width(e.clientX + "px");
//设置右边的大小
$("#div3").width((divWidth - e.clientX - 10) + "px");
}
}
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
}
})
})
</script>
</html>
<style>
#div {
height: 400px;
background-color: #55aaff;
}
#div>div {
float: left;
}
#div1 {
height: 300px;
width: 80%;
background-color: #00ff00;
}
#div2 {
height: 300px;
width: 10px;
background-color: #ffff00;
cursor: w-resize;
}
#div3 {
height: 300px;
width: calc(20% - 10px);
background-color: #aa00ff;
}
</style>
在vue中写法(使用js)
在vue中也能使用jq，将拖动的方法换成html里面的就可以
<template>
<div id="div">
<div id="div1">
字母和数字键的键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57
</div>
<div id="div2" @mousedown="mousedown"></div>
<div id="div3">
数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
0 96 8 104 F1 112 F7 118
1 97 9 105 F2 113 F8 119
2 98 * 106 F3 114 F9 120
3 99 + 107 F4 115 F10 121
4 100 Enter 108 F5 116 F11 122
5 101 - 109 F6 117 F12 123
6 102 . 110
7 103 / 111
</div>
</div>
</template>
<script>
export default {
methods: {
mousedown(e){
// 父级框的宽度
let divWidth = document.getElementById("div").clientWidth;
//添加鼠标移动事件
document.onmousemove = function(e) {
// 防止链接打开 URL
e.preventDefault();
// e.clientX是鼠标指针相对于浏览器页面（或客户区）的水平坐标
// 可以理解为鼠标距离屏幕左侧的距离
// 当鼠标距离左面大于300和鼠标位置小于父级总长度-220
//就是控制左面和右边两个的最小宽度
if (e.clientX > 300 && e.clientX < (divWidth - 220)) {
//设置左面的大小
document.getElementById("div1").style.width = (e.clientX + "px");
//设置右边的大小
document.getElementById("div3").style.width = ((divWidth - e.clientX - 10) + "px");
}
}
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
}
</script>
<style scoped="scoped">
#div {
height: 400px;
background-color: #55aaff;
}
#div>div {
float: left;
}
#div1 {
height: 300px;
width: 80%;
background-color: #00ff00;
}
#div2 {
height: 300px;
width: 10px;
background-color: #ffff00;
cursor: w-resize;
}
#div3 {
height: 300px;
width: calc(20% - 10px);
background-color: #aa00ff;
}
</style>
