效果是前面有个需求，想要一个可以自由拖拽排序的流程图组件，但是在上面找不到合适的demo互联网，所以自己做了这样一个原型。组件设计首先需要设计配置参数，然后将配置参数融入到样式设计过程中，最后实现组件拖拽并实时显示效果。参数总体参数参数说明titleTitle(String)dragAble是否可拖动(Boolean)width图标最小宽度(number)radius是否圆角(Boolean)数据处理项(Array)数据处理项参数结构如下[{icon:require('@/assets/logo.png'),//icontext:'ready'//text},{icon:require('@/assets/1.png'),text:'start'},]函数监听鼠标事件//是否可拖动if(this.chartData.dragAble){window.addEventListener('mouseup',this.handleMouseup);window.addEventListener('mouseover',this.handleMouseover);}初始化数据//初始化数据initData(){letdata=this.vChartDataList;让res=[],flag=true,temp=[];对于（让i=1；i<=data.length；i++）{data[i-1]。id='item'+'-'+res.length+'-'+(i-1);如果（标志）temp.push（数据[i-1]）；否则temp.unshift(data[i-1]);if(i%this.itemNum==0||i==data.length){res.push([...temp]);温度=[];旗帜=！旗帜；}}this.chartDataList=res;}拖动功能//item点击事件itemClick(index1,index,id,item){if(!this.chartData.dra山墙）返回；this.selectedItem={...item};this.selectedItem.opacity='0.5';让num=parseInt(id.split('-')[2]);让dom=document.getElementById('moveDiv');letdom1=document.getElementById(id);//显示的节点letd=document.getElementById('chartContent');d.style.border="虚线1px蓝色";//this.vChartDataList.splice(num,1);this.oldInd=num;这个.initData();this.operateDom=dom;//记录操作的节点this.operateDomNum=num;this.startX=dom1.offsetLeft;this.startY=dom1.offsetTop;dom.style.visibility='继承';dom.style.position='固定';dom.style.left=dom1.offsetLeft;dom.style.top=dom1.offsetTop;},//移动时显示效果handleMouseover(event){if(this.vChartDataList.length
