jsplumb节点可拖动_JS组件系列——JsPlumb制作流程图及相关效果详解

上    篇

前言：之前项目里面用到了Web里面的拖拽流程图的技术JsPlumb，其实真不算难，不过项目里面用HTML做的一些类似flash的效果，感觉还不错，在此分享下。

Jsplumb官网：https://jsplumbtoolkit.com

GitHub：https://github.com/sporritt/jsplumb/

一、效果图展示

1、从左边拖动元素到中间区域，然后连线

2、连线类型可以自定义：这里定义为直线、折线、曲线。实际项目中根据业务我们定义为分装线、分装支线、总装线等

3、鼠标拖动区域选中元素，并且选中元素统一拖动位置。

4、对选中的元素左对齐。

5、对选中元素居中对齐

6、右对齐

7、上对齐

8、垂直居中对齐