首先说下思想
- flex或者其他布局方式,实现左右分割布局,主盒子宽度100%,左右布局中包含一个分割条(可在布局容器中,也可以单独定义)
- 为分隔条绑定鼠标点击事件,为document绑定鼠标移动事件和鼠标放开事件,通过监听鼠标移动事件和上一个状态保存下来的鼠标位置作对比,判断当前鼠标移动方向(往左还是往右)
- 然后计算当前鼠标位置和鼠标点击位置的距离,来计算左右容器的变化,然后通过dom的方式设置宽度,达到动态拖拽窗口大小的效果
这里只是一个简单的demo,具体的实现codepen的逻辑很复杂,具体的项目可以访问github下载阅读
我就是实现了一下左右拖动的效果,对于边界判断,容器里的内容压缩等都没有做具体的处理,所以测试时内容会出现一定的bug
我的代码:
<template>
<div class="example">
<div class="left" id='left1'>
<!-- <input id="file" class="filepath" @change="changepic(this)" type="file"><br>
<img src="" id="show" width="200"> -->
</div>
<div class="bar">
</div>
<div class="right">
</div>
</div>
</template>
<script>
import $ from 'jquery'
var moving = false;
// var left = document.getElementsByClassName('.left')
// var left = $('.left')
var right
var bar =$('.bar')
var size = "width"
var axis = 'clientX'
var minSize = 20
var boxesSize = $('.example')[size]();//盒子总宽
var left
var moveS = 0
var $doc = $(document);
var info={}
export default {
mounted: function(){
window.onload = ()=>{
left = $(".left")
right = $('.right')
console.log(right)
var bar =$('.bar')
var size = "width"
var axis = 'clientX'
var minSize = 20
var boxesSize = $('.example')[size]();//盒子总宽
console.log(boxesSize)
var moveS = 0
var $doc = $(document);
var info={}
init(right,left,boxesSize)
}
},
data :function(){
return{
imgsrc:'',
}
},
computed:{
changeplace: function(){
}
},
methods: {
getelement:function(){
console.log(document.getElementsByClassName('bar'))
},
changepic :function(){
var reads= new FileReader();
var f=document.getElementById('file').files[0];
reads.readAsDataURL(f);
reads.onload=function (e) {
document.getElementById('show').src=this.result;
};
},
},
}
var setInfo = function (e) {
info.startS = e[axis];
// info.thisS = left[size]();
// info.thatS = right[size]();
// info.totalS = info.thisS + info.thatS + 20;//左右区域总宽
// console.log(info)
};
var init = function(right ,left,boxesSize){
console.log(left)
$(".bar").bind("mousedown",function(e) {
moving = true;
moveS = e[axis];
// console.log(e)
setInfo(e);//设定初始位置
})
$doc.bind("mousemove", function (e) {
if (!moving) return;
var moveDir = e[axis] - moveS;//判断移动方向,往左往右
console.log(e[axis],moveS)
//获得左右模块的宽度
// console.log(left)
var thisSize = left["width"]();
// console.log(boxesSize,thisSize)
var thatSize = boxesSize - thisSize - 20;
// console.log(thisSize,thatSize)
// setInfo(e)
//右移动或者下移动
var moveDis = (e[axis] - info.startS);
console.log(moveDir)
if (moveDir > 0) {
thatSize-=moveDis
thisSize+=moveDis
console.log('右',boxesSize,thisSize,thatSize,moveDis)
// if(thatSize==0)return
}
// 左移动或者上移动
if (moveDir < 0) {
thisSize += moveDis
thatSize -= moveDis
console.log('左',boxesSize,thisSize,thatSize,moveDis)
}
// thisIndex = $boxs.index($boxThis);
// thatIndex = $boxs.index($boxThat);
//移动的距离
// console.log(e[axis],info.startS)
//最大尺寸
// var maxSize = info.totalS;
// var thisSize = info.thisS + moveDis;
// var thatSize = info.totalS - thisSize;
// if (thisSize != minSize) {
// thisSize = (thisSize / boxesSize * 100).toFixed(6) + "%";
// }
// if (thatSize != minSize) {
// thatSize = (thatSize / boxesSize * 100).toFixed(6) + "%";
// }
if(thatSize<=0){
alert('11')
thatSize = 1
}
left[size](thisSize)
right[size](thatSize);
setInfo(e);//设定初始位置
moveS = e[axis];//判断移动的方向
})
$doc.bind("mouseup", function () {
if (!moving) return;
moving = false;
})
}
</script>
<style>
.example{
display: flex;
width: 100%;
height:400px;
background-color: aqua;
}
.left{
background-color: white;
width: 500px;
height: 100%;
flex:none;
}
.bar{
width: 20px;
height: 100%;
display: block;
cursor: col-resize;
z-index: 15;
top: 0px;
right: 0px;
background-color: black
}
.img{
width: 155px;
height: 100%;
float: left;
flex-wrap: inherit;
}
</style>