vue实现多栏布局拖拽
本文实例为大家分享了vue实现多栏布局拖拽的具体代码,供大家参考,具体内容如下
一、目标
vue 实现多个盒子(用户根据实际场景决定盒子数量)自由拖拽,改变宽度。
二、应用场景
可自由拖动宽度的多栏布局。
最典型的案例:编辑器(eg:vscode,idea等)
文章图片
三、组件设计
由于该组件盒子数量不确定,所以我们设计组件时参考了Vuetify中的Form和FormItem的设计。即:外层大盒子处理分发的拖拽事件,里层的盒子负责展示各个Item的内容。
组件设计实现目标:
item1 item2 item3 item4
四、实现 4.1 dragBox 静态页面
(通过插槽实现子元素的嵌套)
【vue实现多栏布局拖拽】4.2 dragItem 页面
(通过插槽实现drag-item内部元素的嵌套)
默认信息.resize {position: absolute; top: 0; right: 0; width: 4px; height: 100%; cursor: col-resize; background-color: #d6d6d6; }
4.3 拖拽逻辑
拖拽的逻辑应当交给dragBox处理,而非dragItem。
4.3.1 在实现拖拽之前,应当给子元素(即:dragItem)进行合理布局。
当用户未给 dragItem 分配初始宽度时,则默认flex:1(平均分配剩余空间)。具体逻辑如下:
// 如果dragItem 没有定义宽度,则flex=1setDragItemFlex () {const dragBox = this.$refs.dragBoxconst childsLen = dragBox.children.lengthfor (let i = 0; i < childsLen; i++) {const node = dragBox.children[i]if (!node.style.width) {// 如果没有定义宽度,则flex=1node.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.targetthis.currentBox = this.resizeBox.parentNode// 当前盒子this.rightBox = this.getNextElement(this.currentBox)// 当前盒子的下个兄弟节点if (!this.rightBox) returnthis.curLen = this.currentBox.clientWidththis.otherBoxWidth = this.$refs.dragBox.clientWidth - this.currentBox.clientWidth - this.rightBox.clientWidth // 其他盒子的宽度// 颜色改变提醒this.resizeBox.style.background = '#818181'this.startX = e.clientXdocument.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.clientXconst 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) returnthis.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()},
引入并注册使用该组件:
item1 item2 item3
五、运行结果
文章图片
具体样式可后期修改。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆