前言

接到项目需求后，发现没有做过相关项目，盘算着拖拽倒是没有问题，但是控件的连线好像挺复杂，所以先开始了一番搜索，希望有合适的轮子那最好不过了。看了这篇对比文章：超级好用的流程图js框架，也看了一个新出的轮子topology，选轮子的时候我习惯性去npm trends，找一些类似的轮子横向对比看看各项数据，然后再去对应的仓库找相关文档，做几个demo先试试能满足需求好上手不。

最后选择了jsPlumb，选择原因：1.开源。2.官网中的样例基本可以满足我的项目需求。3.作者一直有维护，文档还算详细，易懂。

编辑器结构设计

编辑页面分为左中右三部分，左侧控件部分，中间画板，右侧为流程节点配置编辑区域。左侧控件可以拖拽到中间画板，形成流程中的某个节点，可以进行节点连接。点击或移动节点，右侧编辑页面会打开，可以对节点进行配置编辑。每种类型的节点都对应一个编辑栏的组件，而每一个不同id的节点都有一个配置项数据。

控件拖拽入画板

使用HTML 拖放 API，主要使用了：

dragstart：当用户开始拖动一个元素或选中的文本时触发(见开始拖动操作)

dragover：当元素或选中的文本被拖到一个可释放目标上时触发(每100毫秒触发一次)

drop：当元素或选中的文本在可释放目标上被释放时触发(见执行释放)

使用示例：

复制代码methods: {

dragstart(event, menu) {

event.dataTransfer.setData('text/plain', JSON.stringify(menu))

},

drop(event) {

let data = event.dataTransfer.getData('text/plain')

let dom = document.querySelector('.drag-content')

let left = event.x - dom.offsetLeft + dom.scrollLeft

let top = event.y - dom.offsetTop + dom.scrollTop

data = JSON.parse(data)

left = left - left % 4 + 'px' // 网格grid: [4, 4]， 便于直线对齐(优化)

top = top - top % 4 + 'px'

data.id = uuidv1()

data.position = { left, top }

this.flowList.push(data)

}

}

复制代码使用drag event 的 dataTransfer属性保存自定义的控件数据，进行传递。另外也可以定义一个currentMenu保存数据，但这需要重置。

画布