jsPlumb：JavaScript连线库详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_50414588/article/details/127281572

jsPlumb是一个强大的JavaScript连线库，适用于HTML元素的拖放和连线操作，尤其适合构建图表和建模工具。它支持Vue2.0、React和Angular。本文将介绍jsPlumb的基本使用、常用方法及配置选项，包括ready()、batch()、bind()、getInstance()、connect()、addEndpoint()和draggable()等，并展示了如何在实际应用中配置和创建节点、连线。

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

什么是jsplumb

jsPlumb是一个强大得JavaScript连线库，提供html元素的拖放、连线等功能，可绘制不同类型、样式的连线，适用于开发web页面的图表、建模工具等。同时也支持vue2.0 ，react和Angular 。

jsplumb 能干什么？

该框架适用于必须回值图表得web应用程序，比如流程图设计，组织架构图设计等。

jsplumb的基本使用：

1. 配置jsPlumb

npm install jsplumb

2. 引入

import { jsPlumb } from "jsplumb";

jsplumb的常用方法：

1. ready() 确保jsPlumb 插件已经开始渲染

jsPlumb.ready(function() {
    ...
    // your jsPlumb related init code goes here
    ...
});

2. batch() 绘制节点以及节点相关信息

jsPlumb.batch(function() {
  // import here
  for (var i = 0, j = connections.length; i < j; i++) {
      jsPlumb.connect(connections[i]);
  }
});

3. bind() jsPlumb 节点渲染完成后，在这里可以添加事件，在初始化时，直接添加事件

 // 连线事件
 jsPlumb.bind("connection", (info, event) => {
        this.bindLinkEvent(info.connection);
        this.data.links.push([info.sourceId, info.targetId]);
      });

4. getInstance()

jsPlumb默认注册在浏览器的window对象中，为整个页面提供了一个静态实例(jsPlumb)可以直接使用，当然你也可以使用getInstance方法来单独创建一个实例。即：

this.flowInst = jsPlumb.getInstance();

同时，getInstance方法接受一个参数，可以更改实例的配置

this.flowInst = jsPlumb.getInstance({
    Connector : [ "Bezier", { curviness: 150 } ],
    Anchors : [ "TopCenter", "BottomCenter" ],
    ...
});

5. jsPlumb.connect(…) 用于创建连线

this.flowInst.connect({
        source: 'item_left', // 源
        target: 'item_right', // 目标
        endpoint: 'Dot' // 线的类型
      })

6. jsPlumb.addEndpoint(…) 用来增加端点

// id: 增加端点得id
// common：端点的配置信息
this.flowInst.addEndpoint(id,{common})
this.flowInst.addEndpoint('item_left', {
        anchors: ['Right']
      })

7. jsPlumb.draggable() 节点是否可拖拽

let common = { 
        containment?: string
        start?: (params:DragEventCallbackOptions) => void
        drag?: (params:DragEventCallbackOptions) => void
        stop?: (params:DragEventCallbackOptions) => void
        cursor?: string
        zIndex?: number
}
this.flowInst.draggable(node._id, {common}