使用jsPlumb绘制流程图

类似上述图例，一般在系统中审批配置中用到，今天亲身经历给大家讲述下jsplumb+jqueryUI来绘制流程图。
这个应该是官方的API: https://docs.jsplumbtoolkit.c...

1、介绍jsPlumb
此项目主要由Simon Porritt开发，他在澳大利亚西德尼担任网络开发人员，它适用于必须绘制图表的Web应用程序开发，可以认为它是个工具软件，也可以集成到自己的项目中，那下面就看下jsplumb+jqueryUI+Vue的实例。

2、基本元素组成

2.1 源节点 SourceId
2.2 目标节点 TargetId
2.3 锚点 Anchor
2.4 端点 Endpoint
2.5 连接线 Connector Line

3、jsPlumb方法
3.1 全局设置

    /* global jsPlumb */
   jsPlumb.ready(function() {
      jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Rectangle',
        connector: ['Bezier'],
        anchor: ['Left', 'Right']
      })
      jsPlumb.draggable('item_left')
      jsPlumb.draggable('item_right')
   })

3.2 连接两个节点

  jsPlumb.connect({
    source: 'item_left',
    target: 'item_right',
    endpoint: 'Dot'
  })

3.3 可拖动节点

  jsPlumb.draggable('item_left')
  jsPlumb.draggable('item_right')

3.4 连接的其它参数

  jsPlumb.connect({
    source: 'item_left',
    target: 'item_right',
    endpoint: 'Rectangle',
    connector: ['Bezier'],
    anchor: ['Left', 'Right']
  })

3.5 增加一个端点
jsPlumb.addEndpoint("state1", exampleEndpoint1);
..........方法比较多，大家翻翻API,这里就不赘述了..........

4、实例初始化
jsplumb默认是注册在浏览器窗口的，将整个页面提供给我们作为一个实例，但我们也可以使用getInstance方法建立页面中一个独立的实例：
var firstInstance = jsPlumb.getInstance();
建立实例之后我们可以设置一些默认值：
firstInstance.importDefaults({
Connector : [ "Bezier", { curviness: 150 } ],//连接器类型
Anchors : [ "TopCenter", "BottomCenter" ]//锚点位置
});
firstInstance.connect({
source:"element1",//源端点
target:"element2",//目标端点
scope:"someScope" //可拖拽范围
});

5、jsPlumb支持事件

* connection
* connectionDetached
* connectionMoved
* click
* dblclick
* endpointClick
* endpointDblClick
* contextmenu
* beforeDrop
* beforeDetach
* zoom
* Connection Events
* Endpoint Events
* Overlay Events
* Unbinding Events