vue 可视化页面 拖拽 布局,vuejs可视化拖拽布局
本文主要详细介绍vue实现多栏布局拖拽和改变框的宽度。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue实现多栏布局拖动的具体代码，供大家参考。具体内容如下
一、目标
Vue实现多个盒子自由拖拽(用户根据实际场景决定盒子数量)来改变宽度。
二、应用场景
可自由拖动宽度的多栏布局。
典型案例：编辑器(如：vscode、idea等。)
三、组件设计
由于该组件的盒数不确定，我们在设计组件时参考了Vuetify中的Form和FormItem的设计。即：外层大盒子处理分发的拖拽事件，里层的盒子负责展示各个Item的内容。
组件设计和实现目标：
拖动框样式=宽度：100%；高度：100%；
拖动项目项目1/拖动项目
拖动项目2/拖动项目
拖动项目3/拖动项目
拖动项目4/拖动项目
/拖动框
四、实现
4.1 dragBox 静态页面
(通过插槽嵌套子元素)
模板
div ref= dragBox style= display:flex；宽度：100%；高度：100%；
插槽/插槽
/div
/模板
4.2 dragItem 页面
(通过插槽嵌套拖动项目的内部元素)
模板
div ref= container class= d-flex style= min-width:200 px；位置：相对；
div style= width:100%；高度：100%；
插槽默认信息/插槽
/div
！-拖放栏-
div v-if= resize show class= resize /
/div
/模板
脚本
导出默认值{
道具：{
//控制是否显示拖放栏；默认情况下会显示它。
resizeShow: {
类型：布尔型，
默认值：真
}
}
}
/脚本
风格。调整大小{
位置：绝对；
top:0；
右：0；
宽度：4px
身高：100%；
光标：列-调整大小；
背景色：# d6d6d6
}
/风格
4.3 拖拽逻辑
拖动的逻辑应该留给dragBox，而不是dragItem。
4.3.1拖动前，子元素(即dragItem)要合理布局。
当用户未给 dragItem 分配初始宽度时，则默认flex:1(平均分配剩余空间)。具体逻辑如下：
//如果dragItem没有定义宽度，则flex=1。
setDragItemFlex () {
const dragBox=this。$refs.dragBox
const childs len=dragbox . children . length
for(设I=0；我是儿童；i ) {
const node=dragBox.children[i]
如果(！node.style.width) {
//如果宽度没有定义，那么flex=1
node.style.flex=1
}
}
},
4.3.2拖放实现逻辑
应为每个dragItem的拖动栏添加一个拖动事件。完整的拖动事件包括：鼠标按下、鼠标移动和鼠标抬起(拖动结束)。
循环为每个拖动条添加事件：
dragControllerDiv () {
constra size=document . getelementsbyclassname( resize )//拖动栏
//循环为每个拖动栏添加事件
for(设I=0；我调整大小.长度；i ) {
//鼠标按下事件
调整[i]的大小。addEventListener(mousedown ，this.onMouseDown)
}
},
鼠标按压逻辑：获取鼠标按压的初始位置，改变拖动条的颜色，添加move和up的监控事件。
onMouseDown(东)
this.resizeBox=e.target
this . current box=this.resizeBox.parentNode//的当前盒子
this . right box=this . get next element(this . current box)//当前框的下一个同级节点
如果(！this.rightBox)返回
this . curlen=this . current box . client width
This.otherboxwidth=this。$ refs . drag box . client width-this . current box . client width-this . right box . client width//其他框的宽度
//颜色变化提醒
this . resize box . style . background= # 818181
this.startX=e.clientX
document . addevent listener( mousemove ，this.onMousemove)
document . addevent listener( mouseup ，this.onMouseup)
},
//获取下一个同级元素的兼容函数
getNextElement (element) {
if(element . nextelementsibling){
return element . nextelementsibling
}否则{
var next=element.nextSibling//s下一个兄弟节点
while (next next.nodeType！==1) { //有并且不是我想要的
next=next.nextSibling
}
下一次返回
}
}
鼠标移动事件：计算并设置当前盒子和右侧盒子的宽度。
onMousemove (e) {
const endX=e.clientX
const moveLen=endX-this。startx//(endX-startx)=1移动的距离
const CurBoxLen=this。curlen moveLen//resize[I].左边的移动的距离=左边区域最后的宽度
const rightBoxLen=this .$参考文献。拖拽盒。客户端宽度-CurBoxLen-this。其他框宽度//右侧宽度=总宽度-左侧宽度-其它盒子宽度
//当最小宽度时，无法继续拖动
if(CurBoxLen=200 rightBoxLen=200)返回
这个。当前框。风格。width=CurBoxLen px //当前盒子的宽度
这个。调整框的大小。风格。left=CurBoxLen//设置左侧区域的宽度
这个。右框。风格。宽度=右边框长度像素
},
鼠标抬起事件：销毁鼠标按下和鼠标移动事件；恢复拖拽条的颜色。
onMouseup () {
//颜色恢复
这个。调整框的大小。风格。background= # d6d6d 6
文档。removeeventlistener( mousedown ，this.onMouseDown)
文档。removeeventlistener( mousemove ，this.onMousemove)
},
在安装好的钩子函数里添加对应的事件。
已安装(){
this.setDragItemFlex()
this.dragControllerDiv()
},
引入并注册使用该组件：
模板
div id= app style= width:100%；身高：100瓦时边框：1px纯色# ccc
拖动框样式=宽度：100%;高度：100%;
拖动项目style= width:20%；项目1/拖动项目
拖动项目2/拖动项目
拖动项目style= width:20%；:resize show= false item 3/drag-item
/拖动框
/div
/模板
脚本
从导入{DragBox，DragItem} ./组件/拖动布局
导出默认值{
名称："应用程序",
组件：{
拖拽盒，
DragItem
}
}
/脚本
五、运行结果
具体样式可后期修改。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。