HTML5拖拽API 和 jsplumb 实现绘制拓扑图（二）

首先：在vue项目中安装jsplumb

执行 npm install jsplumb --save

绘制拓扑图

1、创建jsplumb实例

import {jsPlumb} from 'jsplumb'
export default {
  data() {
    return {
      jsplumbInstance: null, // jsplumb实例
    }
  },
  methods: {
    initData() {
      // 创建jsplumb实例
      this.jsplumbInstance = jsPlumb.getInstance();
    }
  }
}

2、jsplumb设置拓扑节点可以进行拖动。eleId表示当前拖动节点的id。默认情况下，节点可以拖动到画布区域外面，设置containment: 'parent',表示节点只能在自己的父元素内进行拖动，在我代码里，父元素代表画布区域。

makeTopoNodeDrag(eleId) {
  this.jsplumbInstance.draggable(eleId, {containment: 'parent'});
}

3、jsplumb给每一个节点添加端点。addEndpoint方法可以用来添加端点。

addEndPoints(eleId) {
  let style = {
    endpoint: 'Dot',
    // 将isSource和isTarget设置为tr