jsplumb基础

jsplumb–可以绘制您可以想到的任何类型的图表的

连接两个节点
{source：‘连接源’，target：‘连接目标’，endpoint：‘端点类型’}、

可拖动节点
{jsPlumb.draggable：‘连接源’}、

连接的其他参数{connector：‘Bezier/Flowchart/StateMachine/Straight’，‘anchor’：‘锚点位置’}、

设置连接的默认值、

给连接加上样式
{paintStyle: { stroke: ‘颜色’, strokeWidth: 大小 }, endpointStyle: { fill: ‘填充颜色’, outlineStroke: ‘边框颜色’, outlineWidth: 大小 }}、

给连接加上箭头
{overlays: [ [‘Arrow/Label/PlainArrow/Diamond/Custom’, { width: 12, length: 12, location: 0.5中间/1末端 }] ]}

增加一个端点
{jsPlumb.addEndpoint(‘连接源/连接目标’，{anchors：[‘Left/Right’]})}

拖动创建连接
{isSource: true, isTarget: true,}、

给端点增加样式
{ hoverPaintStyle: {outlineStroke: ‘鼠标放上颜色’},connectorStyle: {outlineStroke: ‘线条颜色’,strokeWidth: 大小},connectorHoverStyle: {strokeWidth: 鼠标放上大小}}

限制节点拖动区域
jsPlumb.setContainer(‘area-id’)、
节点网格对齐jsPlumb.draggable(‘item_left’, {containment: ‘parent’,grid: [10, 10]})、

给链接添加点击事件：点击删除连线、
jsPlumb.bind(‘click’, function (conn,originalEvent) {})

删除节点，包括节点相关的连接
jsPlumb.remove(‘item_left’)、

连接前的检查，判断是否建立连接
jsPlumb.bind(‘beforeDrop’, function (info) {}、

一个端点如何拖拽出多条连线：属性maxConnections的值为1指的是一个端点最多只能拉出一条连线，可以将该值设置为-1可不限制连线的数量

整个节点作为source或者target
jsPlumb.makeSource(‘A’, {endpoint:"",anchor: “”}) jsPlumb.makeTarget(‘B’, {endpoint:"",anchor: “”})