jsPlumb使用小技巧

原创已于 2025-02-07 12:45:57 修改 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2020-10-15 16:42:59 首次发布

本文介绍了jsPlumb库在实际应用中的一些小技巧，包括如何设置节点可拖动，添加删除连线的点击事件，处理jsplumb的删除事件，捕获链接的源ID和目标ID，以及为拖拽生成的链接添加箭头的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,
                          }]);
                      });