网站建设经费计划内容,鞍山百姓网招聘信息,手机网页视频下载工具,wordpress前端ajax登录 注册实现左右或者上下div两部分拖动#xff0c;宽度或者高度自动变化,实现流畅平滑的变化#xff0c;还可以是实现拖动到一定宽度就不让拖动了#xff0c;如果你不需要最小宽度#xff0c;就直接去掉样式就行
这是页面。分左中右三部分#xff0c;中间我是用来作为拖动的按钮…实现左右或者上下div两部分拖动宽度或者高度自动变化,实现流畅平滑的变化还可以是实现拖动到一定宽度就不让拖动了如果你不需要最小宽度就直接去掉样式就行
这是页面。分左中右三部分中间我是用来作为拖动的按钮如果你不需要你可以让外部content相对定位center中间部分绝对定位。
我这边实现的左有都具有最小宽度左右拖动改变的宽度。 上下div拖动自动变化高度同样可以以相同的原理来实现。
div classcontentdiv classleft refrefLeft/divdiv classcenterrefrefCentermousedown.stop.preventstartResize/divdiv classright refrefRight/div
/div
这是对应的样式根据自身情况可以自己调整样式实现相关功能
.content{height: 100%;width:100%display: flex;.left {flex: 1;height: 100%;min-width: 200px;width:600px}.resize {cursor: col-resize;//拖动鼠标样式height: 100%;width: 8px;}.right {width: calc(100% - 600px);min-width: calc(100% - 600px);height: 100%;}}// 左右拖动这里的一个大概说明就是把减少的div宽度加到另一个div的宽度上去就是现实一增一减变量自己取data定义就行了startResize(event) {this.startX event.clientX;this.startWidth this.$refs.refRight.offsetWidth;console.log(event.clientX,this.startWidth,this.startWidth)this.isResizing true;window.addEventListener(mousemove, this.doResize);window.addEventListener(mouseup, this.stopResize);},doResize(event) {if (this.isResizing) {console.log(event.clientX,this.startWidth)const deltaX -event.clientX this.startX;this.$refs.refRight.style.width this.startWidth deltaX px;}},stopResize() {this.isResizing false;window.removeEventListener(mousemove, this.doResize);window.removeEventListener(mouseup, this.stopResize);},
