vue实现多栏布局拖拽
本文实例为大家分享了vue实现多栏布局拖拽的具体代码,供大家参考,具体内容如下
一、目标
vue 实现多个盒子(用户根据实际场景决定盒子数量)*拖拽,改变宽度。
二、应用场景
可*拖动宽度的多栏布局。
最典型的案例:编辑器(eg:vscode,idea等)
三、组件设计
由于该组件盒子数量不确定,所以我们设计组件时参考了vuetify中的form和formitem的设计。即:外层大盒子处理分发的拖拽事件,里层的盒子负责展示各个item的内容。
组件设计实现目标:
<drag-box style="width: 100%; height: 100%;"> <drag-item>item1</drag-item> <drag-item>item2</drag-item> <drag-item>item3</drag-item> <drag-item>item4</drag-item> </drag-box>
四、实现
4.1 dragbox 静态页面
(通过插槽实现子元素的嵌套)
<template> <div ref='dragbox' style='display: flex; width: 100%; height: 100%;'> <slot></slot> </div> </template>
4.2 dragitem 页面
(通过插槽实现drag-item内部元素的嵌套)
<template> <div ref="container" class="d-flex" style="min-width: 200px; position: relative;"> <div style="width: 100%; height: 100%;"> <slot>默认信息</slot> </div> <!-- 拖拽条 --> <div v-if="resizeshow" class="resize" /> </div> </template> <script> export default { props: { // 控制拖拽条的是否显示,默认显示 resizeshow: { type: boolean, default: true } } } </script> <style> .resize { position: absolute; top: 0; right: 0; width: 4px; height: 100%; cursor: col-resize; background-color: #d6d6d6; } </style>
4.3 拖拽逻辑
拖拽的逻辑应当交给dragbox处理,而非dragitem。
4.3.1 在实现拖拽之前,应当给子元素(即:dragitem)进行合理布局。
当用户未给 dragitem 分配初始宽度时,则默认flex:1(平均分配剩余空间)。具体逻辑如下:
// 如果dragitem 没有定义宽度,则flex=1 setdragitemflex () { const dragbox = this.$refs.dragbox const childslen = dragbox.children.length for (let i = 0; i < childslen; i++) { const node = dragbox.children[i] if (!node.style.width) { // 如果没有定义宽度,则flex=1 node.style.flex = 1 } } },
4.3.2 拖拽实现逻辑
应当为每个dragitem的拖动条添加拖动事件。完整的拖动事件包括:鼠标按下,鼠标移动,鼠标抬起(拖动结束)。
循环为每个拖动条添加事件:
dragcontrollerdiv () { const resize = document.getelementsbyclassname('resize') // 拖拽条 // 循环为每个拖拽条添加事件 for (let i = 0; i < resize.length; i++) { // 鼠标按下事件 resize[i].addeventlistener('mousedown', this.onmousedown) } },
鼠标按下逻辑:获取鼠标按下的初始位置,改变拖拽条颜色,添加move和up的监听事件。
onmousedown (e) { this.resizebox = e.target this.currentbox = this.resizebox.parentnode// 当前盒子 this.rightbox = this.getnextelement(this.currentbox)// 当前盒子的下个兄弟节点 if (!this.rightbox) return this.curlen = this.currentbox.clientwidth this.otherboxwidth = this.$refs.dragbox.clientwidth - this.currentbox.clientwidth - this.rightbox.clientwidth // 其他盒子的宽度 // 颜色改变提醒 this.resizebox.style.background = '#818181' this.startx = e.clientx document.addeventlistener('mousemove', this.onmousemove) document.addeventlistener('mouseup', this.onmouseup) }, // 获取下一个兄弟元素的兼容函数 getnextelement (element) { if (element.nextelementsibling) { return element.nextelementsibling } else { var next = element.nextsibling// 下一个兄弟节点 while (next && next.nodetype !== 1) { // 有 并且 不是我想要的 next = next.nextsibling } return next } }
鼠标移动事件:计算并设置当前盒子和右侧盒子的宽度。
onmousemove (e) { const endx = e.clientx const movelen = endx - this.startx // (endx-startx)= 移动的距离 const curboxlen = this.curlen + movelen // resize[i].left+移动的距离=左边区域最后的宽度 const rightboxlen = this.$refs.dragbox.clientwidth - curboxlen - this.otherboxwidth // 右侧宽度=总宽度-左侧宽度-其它盒子宽度 // 当最小宽度时,无法继续拖动 if (curboxlen <= 200 || rightboxlen <= 200) return this.currentbox.style.width = curboxlen + 'px'// 当前盒子的宽度 this.resizebox.style.left = curboxlen // 设置左侧区域的宽度 this.rightbox.style.width = rightboxlen + 'px' },
鼠标抬起事件:销毁mousedown和mousemove事件;恢复拖拽条的颜色。
onmouseup () { // 颜色恢复 this.resizebox.style.background = '#d6d6d6' document.removeeventlistener('mousedown', this.onmousedown) document.removeeventlistener('mousemove', this.onmousemove) },
在mounted钩子函数里添加对应的事件。
mounted () { this.setdragitemflex() this.dragcontrollerdiv() },
引入并注册使用该组件:
<template> <div id="app" style="width: 100%; height: 100vh; border:1px solid #ccc;"> <drag-box style="width: 100%; height: 100%;"> <drag-item style="width: 20%;">item1</drag-item> <drag-item>item2</drag-item> <drag-item style="width: 20%;" :resizeshow='false'>item3</drag-item> </drag-box> </div> </template> <script> import {dragbox, dragitem} from './components/draglayouter' export default { name: 'app', components: { dragbox, dragitem } } </script>
五、运行结果
具体样式可后期修改。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 阿呆幽默爆笑说美式足球
下一篇: HTML5实战与剖析之离线应用