jsPlumb使用小技巧

jsPlumb使用小技巧

1:设置节点可拖动时 ,必须把item节点的样式设置为

position:absolute

再设置

jsPlumb.draggable('item_id')

2:给连接添加点击事件：点击删除连线

如下代码:

// 请单点击一下连接线, 
jsPlumb.bind('click', function (conn, originalEvent) {
  if (window.prompt('确定删除所点击的连接吗？ 输入1确定') === '1') {
    jsPlumb.detach(conn)
  }
})

会提示 jsPlumb: fire failed for event click : TypeError: jsPlumb.detach is not a function

因为版本更新

结论就是使用deleteConnection(conn)替换掉 detach(conn)

3.jsplumb 事件 =>点击连线,确认删除

                jsPlumb.bind('click', function (conn, originalEvent) {//绑定点击事件,抓取事件源
                    if (window.confirm('确定删除所点击的链接吗？')) {
                        jsPlumb.deleteConnection(conn)	//删除对应连线
                    }
                })

4.jsplumb事件 =>链接事件,可捕获链接的源id和目标id

                // 删除新连接或现有连接时触发此事件,形参里有sourceId和targetId
                   jsPlumb.bind('beforeDrop', function (conn) {
                       console.log(conn.sourceId,conn.targetId);
                       return true;
                   })

5.jsplumb事件=>给拖拽产生的链接添加箭头

                      jsPlumb.bind("connection", function (e) {//connection链接事件
                          jsPlumb.select(e).addOverlay(["Arrow", {
                              location: 0.5, width: 12, length: 15
                              //foldback: 0.2,
                          }]);
                      });