左右拖拽效果图:
直接上代码:
html:
<div id="box">
<div id="left"></div>
<div id="resize"></div>
<div id="right"></div>
</div>
CSS:
body,html{
margin:0;
padding:0;
height:100%;
}
#box{
width:600px;
height:500px;
overflow:hidden;
}
#left{
width:calc(30% - 5px);
height:100%;
background:skyblue;
float:left;
}
#resize{
width:5px;
height:100%;
cursor: w-resize;
float:left;
}
#right{
float:right;
width:70%;
height:100%;
background:tomato;
}
js:
window.onload = function(){
var resize = document.getElementById("resize");
var left = document.getElementById("left");
var right = document.getElementById("right");
var box = document.getElementById("box");
resize.onmousedown = function(e){
var startX = e.clientX;
resize.left = resize.offsetLeft;
document.onmousemove = function(e){
var endX = e.clientX;
var moveLen = resize.left + (endX - startX);
var maxT = box.clientWidth - resize.offsetWidth;
if(moveLen<150) moveLen = 150;
if(moveLen>maxT-150) moveLen = maxT-150;
resize.style.left = moveLen;
left.style.width = moveLen + "px";
right.style.width = (box.clientWidth - moveLen - 5) + "px";
}
document.onmouseup = function(evt){
document.onmousemove = null;
document.onmouseup = null;
resize.releaseCapture && resize.releaseCapture();
}
resize.setCapture && resize.setCapture();
return false;
}
}
上下拖拽效果图:
html:
<div id="svgBox">
<div id="svgTop">
<svg width="100%" id="controllerSvg"></svg>
</div>
<div id="svgResize"></div>
<div id="svgDown" style="border-top: 1px solid #b5b9a9; ">
<svg width="100%" height="auto" id="serverSvg"></svg>
</div>
</div>
CSS:
#svgBox{
width:100%;
height:100%;
position: relative;
overflow:hidden;
}
#svgTop{
height:calc(30% - 5px);
width:100%;
float:left;
overflow: auto;
}
#svgResize{
position: relative;
height:5px;
width:100%;
cursor: s-resize;
float:left;
}
#svgDown{
height:70%;
width:100%;
float:left;
overflow: hidden;
}
js的methods方法中:
//methods方法中
methods:{
dragControllerDiv : function () {
$(document).ready(function(){
var svgResize = document.getElementById("svgResize");
var svgTop = document.getElementById("svgTop");
var svgDown = document.getElementById("svgDown");
var svgBox = document.getElementById("svgBox");
svgResize.onmousedown = function(e){
var startY = e.clientY;
svgResize.top = svgResize.offsetTop;
document.onmousemove = function(e){
var endY = e.clientY;
var moveLen = svgResize.top + (endY - startY);
var maxT = svgBox.clientHeight - svgResize.offsetHeight;
if(moveLen<30) moveLen = 30;
if(moveLen>maxT-30) moveLen = maxT-30;
svgResize.style.top = moveLen;
svgTop.style.height = moveLen + "px";
svgDown.style.height = (svgBox.clientHeight - moveLen - 5) + "px";
}
document.onmouseup = function(evt){
document.onmousemove = null;
document.onmouseup = null;
svgResize.releaseCapture && svgResize.releaseCapture();
}
svgResize.setCapture && svgResize.setCapture();
return false;
}}
)
},
}
js的mounted方法中:
//mounted()中
mounted(){
this.dragControllerDiv();
}
这里面要注意的就是,e.clientY/offsetTop 这些属性,都是获取的哪个对象的值,然后根据自己的页面实际调整。结合上面温习的盒子模型,搞清楚层模型中的定位的用法。
发现问题以及反馈:
整个#svgBox的高度未固定住,当上下拖动拖动条时,#svgDown的高度没变,反而是#svgBox的高度在变化。和我们想要的效果恰恰相反,我们预期效果应该是把#svgBox高度固定,拖动的时候,#svgTop和#svgDown的高度随之变化。
更正这个bug,我们根据屏幕分辨率不同,获取到当前屏幕的高度,然后把屏幕高度的40%赋值给#svgBox的高度。代码如下:
var h = window.screen.height;
console.log(h);
var svgBox = document.getElementById("svgBox");
svgBox.style.height = h * 0.4 + "px";
此时就可以将#svgBox的高度固定住。