JsPlumb使用心得(2)

如果没看过JsPlumb使用心得(1)的可先查看初始教程 JsPlumb(1)

7.事件

// 请单点击一下连接线, 
jsPlumb.bind('click', function (conn, originalEvent) {
  alert('点击了线')
})

jsPlumb Events列表 官方事件文件

• connection
• connectionDetached
• connectionMoved
• click  //单击
• dblclick  //双击
• endpointClick
• endpointDblClick
• contextmenu
• beforeDrop //连接前
• beforeDetach //断开连接前
• zoom
• Connection Events
• Endpoint Events
• Overlay Events
• Unbinding Events

8.删除节点

jsPlumb.bind('click', function (conn, originalEvent) {
    jsPlumb.remove(conn.targetId+'')  //id
})

9.编码连接endPoint(通过uuids)

jsPlumb.addEndpoint('item_left', {
  anchors: ['Right'],
  uuid: 'fromId'
})

jsPlumb.addEndpoint('item_right', {
  anchors: ['Left'],
  uuid: 'toId'
})

jsPlumb.connect({ uuids: ['fromId', 'toId'] })

10.整个dom做为source  target

jsPlumb.makeSource('A', {
     endpoint:"Dot",
     anchor: "Continuous"
})

jsPlumb.makeTarget('B', {
     endpoint:"Dot",
     anchor: "Continuous"
})
/**
Static 静态 固定位置的锚点
Dynamic jsPlumb自动选择合适的锚点，动态锚点
Perimeter 边缘锚点，会根据节点形状去改变位置
Continuous 根据节点位置，自动调整位置的锚点
*/