简单实现可拖拽流程图vue组件

[
  {
    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 = 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;
},