可拖拽流程图组件开发前端vue.js

效果
文章图片

说在前面因为自己有需求，想要一个可以自由拖拽排序的流程图组件，在网上没有找到合适的demo，所以便自己动手做了这样一个雏形。
组件设计首先需要设计好配置参数，然后就是讲配置参数融入到样式的设计处理上，最后是实现组件拖动并实时展示效果。
参数
整体参数

参数	描述
title	标题（String）
dragAble	是否可拖拽（Boolean）
width	图标最小宽度（number）
radius	是否圆角（Boolean）
data	流程项（Array）

data流程项参数结构如下

[ { icon:require('@/assets/logo.png'),//图标 text:'准备'//文字 }, { icon:require('@/assets/1.png'), text:'开始' }, ]

功能
监听鼠标事件

//是否可拖拽 if(this.chartData.dragAble){ window.addEventListener('mouseup',this.handleMouseup); window.addEventListener('mouseover',this.handleMouseover); }

初始化数据

//初始化数据 initData(){ let data = https://www.it610.com/article/this.vChartDataList; let res = [],flag = true,temp = []; for(let i = 1; i <= data.length; i++){ data[i - 1].id ='item' + '-' + res.length + '-' + (i - 1); if(flag) temp.push(data[i - 1]); else temp.unshift(data[i - 1]); if(i % this.itemNum == 0 || i == data.length){ res.push([...temp]); temp = []; flag = !flag; } } this.chartDataList = res; }

拖拽功能

//item点击事件 itemClick(index1,index,id,item){ if(!this.chartData.dragAble) return; this.selectedItem = {...item}; this.selectedItem.opacity = '0.5'; let num = parseInt(id.split('-')[2]); let dom = document.getElementById('moveDiv'); let dom1 = document.getElementById(id); //展示的节点 let d = document.getElementById('chartContent'); d.style.border="dashed 1px blue"; // this.vChartDataList.splice(num,1); this.oldInd = num; this.initData(); this.operateDom = dom; //记录操作的节点 this.operateDomNum = num; this.startX = dom1.offsetLeft; this.startY = dom1.offsetTop; dom.style.visibility = 'inherit'; dom.style.position = 'fixed'; dom.style.left = dom1.offsetLeft; dom.style.top = dom1.offsetTop; },

//移动时实时展示效果 handleMouseover(event){ if(this.vChartDataList.length < this.chartData.data.length){ this.vChartDataList.unshift({...this.chartData.data[0]}); } if(this.operateDom != null){ const w = this.operateDom.offsetWidth,h = this.operateDom.offsetHeight; let x = event.pageX,y = event.pageY; this.operateDom.style.position = 'fixed'; this.operateDom.style.opacity = '0.5'; this.operateDom.style.left = x - w / 2 + 'px'; this.operateDom.style.top = y - h / 2 + 'px'; let {tx,ty} = this.getItemCoords(x,y); let oldInd = this.oldInd; if(oldInd >= 0){ this.vChartDataList.splice(oldInd,1); this.initData(); } let nty = (parseInt(ty) % 2 == 0 ? parseInt(tx) : this.itemNum - parseInt(tx)); nty = Math.min(nty,this.itemNum); nty = Math.max(nty,0); oldInd = parseInt(ty) * this.itemNum + nty; oldInd = Math.min(this.chartData.data.length - 1,oldInd); oldInd = Math.max(0,oldInd); this.oldInd = oldInd; if(oldInd < 0) return; this.vChartDataList.splice(oldInd,0,{...this.selectedItem}); this.initData(); } },

//确定最终位置 handleMouseup(event){ const chartContent = document.getElementById('chartContent'); const dom = document.getElementById('moveDiv'); const w = chartContent.offsetWidth, h = chartContent.offsetHeight, l = chartContent.offsetLeft, t = chartContent.offsetTop; const x = event.pageX,y = event.pageY; dom.style.visibility = 'hidden'; // if(x > l && x < (l + w) && y > t && y < (t + h)){// }else{ // } if(this.vChartDataList[this.oldInd]) this.vChartDataList[this.oldInd].opacity = 1; chartContent.style.border='none'; this.operateDom = null; this.operateDomNum = null; this.oldInd = null; },

代码 Gitee地址：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse
预览地址 【可拖拽流程图组件开发】http://jyeontu.xyz/JYeontuComponents/#/flowChartView