基于jsPlumb实现的可拖拽自定义流程图

收藏    

      jsplumb 中文基础教程 jsplumb能干什么？ 那么如果你应该使用它取决于你想用jsPlumb做什么。该框架适用于必须绘制图表的Web应用程序，例如类似于Visio的应用程序或工作流程设计器等。由于图表项目和连接的所有参数都是非常精细可控的，因此您可以绘制您可以想到的任何类型的图表的！ 基本概念 Souce 源节点 Target 目标节点 Anchor 锚点 锚点位于源节点或者目标节点上 Endpoint 端点 端点位于连线上 Connector 连接 或者也可以理解是连接线 Overlays 可以理解为在连接线上的文字或者箭头之类的东东 ttt2.png Anchors [todo] 锚点类型： 静态锚点 动态锚点 边缘锚点 固定锚点 Connectors [todo] 连线类型： Bezier 贝塞尔曲线 Straight 直线 Flowchart 90度转角线 State Machine 状态机 Endpoints [todo] 端点类型: Dot 圆点 Rectangle 矩形 Image 图像 Blank 空白 Overlays [todo] Overlays可以理解为在连接线上的文字或者箭头之类的东东 Overlays类型 Arrow Label PlainArrow Diamond Custom 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 // 连线上overlay可以多个， // 每个overlay可以指定相对位置 // label类型的overlay实际上可以在里面直接写html // jsPlumb.connect({ ... connectorOverlays: [ ['Arrow', { width: 10, length: 10, location: 1 }], ['Label', { label: 'X', cssClass: '', labelStyle: { color: 'red' }, events: { click: function (labelOverlay, originalEvent) { console.log('click on label overlay for :' + labelOverlay.component) console.log(labelOverlay) console.log(originalEvent) } } }] ] }); 基础demos 连接两个节点 jsPlumb.ready方法和jquery的ready方法差不多的功能，jsPlumb.connect用于建立连线 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 参数说明： jsPlumb.connect(config) return connection 参数 参数类型 是否必须 说明 source String,Object,Endpoint 是 连线源的标识，可以是id, element, 或者Endpoint target String,Object,Endpoint 是 连线目标的标识，可以是id, element, 或者Endpoint endpoint String 可选 端点类型，形状