每天一个jquery插件-拖拽变大小
拖拽变大小
目的是研究网页中拖拽式的分配容器空间的动作是怎么实现的，我这里有三种解决方式，当然都和你的布局有关联，该怎么取用看情况，当然我实现的是最简单的一种啦
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽变大小</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
body,html{
width: 100%;
height: 100%;
}
#div{
width: 100%;
height: 100%;
display: flex;
}
#left,#right{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
#right{
flex: 1;
}
#left{
flex-basis: 100px;
}
#bar{
flex-basis: 5px;
border:1px solid lightgray;
cursor:e-resize;
}
</style>
</head>
<body>
<div id="div">
<div id="left">左边</div>
<div id="bar"></div>
<div id="right">右边</div>
</div>
</body>
</html>
<script>
$(function(){
var flag = flag;
$("#bar").mousedown(function(){
flag=true;
}).mouseup(function(){
flag =false;
})
$("#div").mousemove(function(e){
if(flag){
var temp =e.clientX;
$("#left").css("flex-basis",temp+"px");
}
}).mouseup(function(){
flag =false;
})
})
</script>
实现思路
- 首先这和布局有很大关系，如果一开始布局不科学可能做起来贼麻烦，所以我先从最简单的开始，就是一开始我就用了flex盒子模型，这里面有个flex与flex-basis可以很好的满足我的要求，我只需要监控到拖动的动作，然后跟着改变flex-basis的宽度或者高度就行了，剩下的一半完全不需要我去计算，全部被flex自行挤满了
- 第二种就是没用盒子，而且高宽都是写死的，如果可以，那得在中间加个拖动的块，同样按照上面第一种给的方法去计算宽高，但是这个就得你去把两边都一起计算才行，否则布局就会出现bug。
- 第三种就跟麻烦了，假如你不想在中间加个块状用来提示用户拖拽，而是只给了一个边框薄薄的border，那样子也差不多可以实现，大布局没问题的话应该可以这样去做，监控能拖拽的块，鼠标在里面移动的时候监控是否靠近边框的一个范围，是的话就给上一个类标记上，然后就是重复二一的过程去做
- 完事，碎觉