实现功能：有水平3个DIV，左侧div和右侧div通过摁下鼠标左键修改div尺寸。
思路：设置一条drap-line线 并绑定方法，当摁下鼠标左键滑动时修改div尺寸，释放鼠标修改尺寸结束。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
width: 100vw;
height: 100vh;
}
.left,
.right {
width: 400px;
background-color: aliceblue;
height: 100%;
}
.center {
flex: 3;
background-color: antiquewhite;
height: 100%;
}
.drap-line {
width: 4px;
height: 100%;
background-color: brown;
cursor: col-resize;
}
</style>
<body>
<div class="left"></div>
<div class="drap-line mr4"></div>
<div class="center"></div>
<div class="drap-line"></div>
<div class="right"></div>
<script>
$(function(){
resizeInit() ;
});
//左右两侧resize事件
function resizeInit() {
var isResizing = false;
var DIV;
var toward = 'left';
$('body').on('mousedown','.drap-line',function (e) {
isResizing = true;
$(this).hasClass('mr4') ? (DIV = $('.left'), toward = 'left') : (DIV = $('.right'), toward = 'right');
});
$(document).on('mouseup',function (e) {
isResizing = false;
});
$(document).on('mousemove',function (e) {
if (!isResizing) return;
var newWidth = 0;
if (toward == 'left') {
newWidth = e.pageX - DIV.offset().left;
} else {
newWidth = $(window).width() - e.pageX;
}
if (newWidth < 270) {
newWidth = 270;
} else if (newWidth > 900) {
newWidth = 900;
}
DIV.width(newWidth);
});
};
</script>
</body>
</html>