Drag-and-drop flowchart component development

The effect

Said in the previous

Because OF my own needs, I want a flowchart component that can be dragged and sorted freely. I did not find a suitable demo on the Internet, so I made such a prototype by myself.

Component design

First, configuration parameters need to be designed, then configuration parameters are integrated into the style of the design process, and finally, components drag and display the effect in real time.

parameter

The overall parameters

parameter	describe
title	Title (String)
dragAble	Can drag and drop (Boolean)
width	Minimum icon width (number)
radius	Rounded or not (Boolean)
data	Process Item (Array)
#### data Flow item parameters
Structure is as follows
“`javascript
[

{icon: the require (' @ / assets/logo PNG '), / / icon text: 'to' / / literal}, {icon: the require (' @ / assets / 1. PNG '), the text: 'start'},Copy the code

]

If (this.chartdata.dragable){if(this.chartdata.dragable){ window.addEventListener('mouseup',this.handleMouseup); window.addEventListener('mouseover',this.handleMouseover); }Copy the code

Initialize data

// Initialize the data
initData(){
	let data = this.vChartDataList;
	let res = [],flag = true,temp = [];
	for(let i = 1; i <= data.length; i++){
		data[i - 1].id = 'item' + The '-' + res.length + The '-' + (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;
}
Copy the code

Drag and drop functionality

//item click event
itemClick(index1,index,id,item){
	if(!this.chartData.dragAble) return;
	this.selectedItem = {... item};this.selectedItem.opacity = '0.5';
	let num = parseInt(id.split(The '-') [2]);
	let dom = document.getElementById('moveDiv');
	let dom1 = document.getElementById(id);// Display the node
	let d = document.getElementById('chartContent');
	d.style.border="dashed 1px blue";
	// this.vChartDataList.splice(num,1);
	this.oldInd = num;
	this.initData();
	this.operateDom = dom;// Record the node of the operation
	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;
},
Copy the code

// Display the effect in real time when moving
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(); }},Copy the code

// Determine the final location
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;
},
Copy the code

code

Gitee address: gitee.com/zheng_yongt…

Preview the address

Jyeontu. Xyz/JYeontuComp…