可拖拽流程图组件开发

效果

说在前面

流程图在技术领域是一种常见的可视化工具，用于展示系统、应用或业务流程的各个步骤以及它们之间的关系。它们可以帮助开发人员和项目团队更好地理解和规划复杂的流程，从而提高工作效率和准确性。但是，传统的静态流程图有时无法满足用户的需求，因此实现可拖拽的流程图组件成为了一个重要的需求。

实现可拖拽的流程图组件的目的和意义是为了提供一种交互性更强、用户体验更好的流程图展示方式。通过该组件，用户可以轻松地拖拽节点进行重新排序，自由调整流程图的结构和布局，从而更好地满足项目需求并提高工作效率。

组件设计

首先需要设计好配置参数，然后就是讲配置参数融入到样式的设计处理上，最后是实现组件拖动并实时展示效果。

参数

整体参数

参数	描述
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) {
    document
        .getElementById("flow-chart")
        .addEventListener("mouseup", this.handleMouseup);
    document
        .getElementById("flow-chart")
        .addEventListener("mouseover", this.handleMouseover);
    document
        .getElementById("flow-chart")
        .addEventListener("touchend", this.handleMouseup);
    document
        .getElementById("flow-chart")
        .addEventListener("touchmove", this.handleMouseover);
}

阻止默认事件

为了确保拖拽功能正常运作，需要在拖拽过程中阻止浏览器默认的拖拽行为。

//阻止默认事件
preventEvent() {
    document.getElementById("flow-chart").ondragstart = function () {
        return false;
    };
    document.getElementById("flow-chart").onselectstart = function () {
        return false;
    };
},

初始化样式和数据

在组件加载时，需要初始化节点的样式和位置，以及计算每个节点的宽度和每行显示的数量。

//初始化样式变量
initStyle() {
    let chartContent = this.$refs.chartContent;
    let width = chartContent.offsetWidth - 40;
    let itemWidth = Math.max(20, Math.floor(width / 7));
    if (this.chartData.width) {
        itemWidth = this.chartData.width;
    }
    this.itemWidth = itemWidth;
    this.itemNum = Math.floor(width / (itemWidth + itemWidth / 5));
},
//初始化数据
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;
},
//重组class
getClass(res, str) {
    if (this.chartData[str]) res += " " + str;
    return res;
},
//重组行样式
getColumnStyle(index) {
    let res = {};
    if (index < this.chartDataList.lenth - 1 || index % 2 == 0)
        return this.styleConcat(res);
    res["margin-left"] = "auto";
    res["margin-right"] = -this.itemWidth / 5 + "px;";
    return this.styleConcat(res);
},
//重组每个item的样式
getItemStyle(item = "") {
    let res = {};
    if (item != "") {
        if (item.opacity) {
            res.opacity = item.opacity;
        }
        return this.styleConcat(res);
    }
    res.width = this.itemWidth + "px;";
    res["margin-right"] = this.itemWidth / 5 + "px;";
    return this.styleConcat(res);
},
//重组每个item的icon的样式
getIconStyle(str) {
    let res = {};
    res.width = this.itemWidth - 5 + "px;";
    res.height = this.itemWidth - 5 + "px";
    if (str == "text") {
        res["line-height"] = this.itemWidth - 5 + "px";
        res["font-size"] = "large";
        res["border"] = "1px solid blue";
        res["background-color"] = "skyblue";
    }
    return this.styleConcat(res);
},
//获取连接线样式
getLineStyle(index, index1, flag) {
    if (
        index1 == this.chartDataList.length - 1 &&
        index == this.chartDataList[index1].length - 1
    )
        return "";
    let res = {};
    res["border-top"] = "1px solid black";
    res.width = this.itemWidth / 3 + "px";
    if (flag == "right")
        res["margin-right"] = -this.itemWidth / 3 + "px;";
    else {
        res["margin-left"] = -this.itemWidth / 3 + "px;";
        res["border-left"] = "1px solid black";
    }
    res["margin-top"] = this.itemWidth / 2 + "px;";
    if (
        index == this.chartDataList[0].length - 1 &&
        index1 < this.chartDataList.length - 1
    ) {
        if (index1 % 2 == 0) {
            res["border-right"] = "1px solid black";
        }
    }
    if (index1 % 2 == 1) {
        if (index == this.chartDataList[index1].length - 1) return "";
    }
    return this.styleConcat(res);
},
//json变量转换为style字符串
styleConcat(obj) {
    let res = "";
    for (let k in obj) {
        res += k + ":" + obj[k] + ";";
    }
    return res;
},

处理鼠标抬起事件

当鼠标抬起时，将拖拽的节点插入到新的位置，并更新节点的样式和位置。

//鼠标抬起时
handleMouseup(event) {
    const chartContent = document.getElementById("chartContent");
    if (this.vChartDataList[this.oldInd])
        this.vChartDataList[this.oldInd].opacity = 1;
    chartContent.style.border = "none";
    this.operateDom = null;
    this.operateDomNum = null;
    this.oldInd = null;
},

处理鼠标移动事件

在拖拽过程中，根据鼠标的位置计算节点的新样式和位置，实现拖拽时的效果。

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 - window.scrollX + "px";
        this.operateDom.style.top = y - h / 2 - window.scrollY + "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();
    }
},
//获取当前移动到的坐标
getItemCoords(x, y) {
    let d = document.getElementById("chartContent");
    let left = d.offsetLeft;
    let top = d.offsetTop;
    (x = x - left), (y = y - top);
    let itemNum = this.itemNum;
    let w = d.offsetWidth;
    let h = d.offsetHeight;
    let moveDiv = document.getElementById("moveDiv");
    let th = moveDiv.offsetHeight;
    w = Math.ceil(w / itemNum);
    (x = Math.floor(x / w)), (y = Math.floor(y / th));
    return { tx: x, ty: y };
},

源码

Gitee地址：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse

预览地址

组件文档：http://jyeontu.xyz/jvuewheel/#/flowChartView

公众号

关注公众号『前端也能这么有趣』，获取更多有趣内容。

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。