***

jsPlumbは、Webページのドラッグ&ドロップ、接続に使用できます.ここでは、ドキュメントの要点を簡単に記録します.
公式ドキュメントのアドレス:https://jsplumbtoolkit.com/community/doc/basic-concepts.html
1、インストール:npm install jsplumb--save
2、main.jsに導入され、ここではvueプロトタイプに直接入れられており、次のページでの使用が便利です.

import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

3、jsPlumbインスタンスを初期化し、jsPlumbの操作はすべてインスタンスオブジェクトの操作になります.初期化はcreatedライフサイクルに置き、他の操作はmountedに置きます.jsPlumbプラグインはページのロードが完了してから機能しなければならないからです.

created(){
 this.jsPlumb = this.$jsPlumb.getInstance({
        Container:"workspace",   //   id
        EndpointStyle: { radius: 4, fill: "#acd"},  //    
        PaintStyle: { stroke: '#fafafa',strokeWidth:3},//     ，  8px    #456
        HoverPaintStyle: { stroke: '#1E90FF' }, //            null
        EndpointHoverStyle: { fill: '#F00', radius:6 }, //       
        ConnectionOverlays:[                 //               
          ["Arrow",{
            location:1,
            paintStyle: {
              stroke: '#00688B',
              fill: '#00688B',
            }
          }]
        ],
        Connector:["Straight",{gap:1}]   //            ：  ，   
  });
}

ここで注意しなければならないのは、フローチャートを置く容器がrelative位置決めに設定されていることです.線も絶対位置決めされているからです.
jsPlumbで注意すべき点:
1、アンカーポイント
アンカーポイントはまた静的アンカー、動的アンカー、周辺アンカー、連続アンカーの4種類に分けられる.
スタティックアンカーの書き方:9単語(Top,Left,Centerなど)
あるいは[x,y,dx,dy]はxと書き,yはアンカー位置取値0から1,dx,dyはアンカー連線方向,取値0,1,-1とする.
このように書く

anchor:"Bottom"

どうてきアンカ
複数のアンカーを指し、最適なアンカーポイントを自動的に選択するたびに

anchor: [ [ 0.2, 0, 0, -1 ],  [ 1, 0.2, 1, 0 ], "Top", "Bottom" ]

しゅうちょうアンカ
ダイナミックアンカーの形式で、アンカーポイントは周長で変化し、自動的に最も近いものを取ります.
6種類の形状Circle Ellipse Triangle Diamond Rectangle Square

 anchor:[ "Perimeter", { shape:"Circle",anchorCount:150 } ]

Perimeterは周長の意味で、後ろの括弧の中の周長アンカー属性、shapeは形状で、anchorCountは周長アンカーの数で、値が大きいほどアンカー点が多くなればなるほど滑らかになります
2、コネクタ
Bezier、Straight、Flowchart、State Machineの6種類があります
線は次のように設定できます.

Connector:["Straight",{gap:1}], 

gapはオプションで、端点と接続線の間隔です.
一般的な接続関数の書き方:

this.jsPlumb.connect({       //this.jsPlumb     jsPlumb  
   source:     ,   //   id 
   target:     ,   //   id 
   overlays:[['Arrow',{location;1}]]  //           ，     ，           
})

3.端点
4つのスタイルの端点:
Dot、Rectangle、Image、Blank(透明端点)

EndpointStyle: { radius: 4, fill: "#acd"},  //  
  
EndpointStyle：'Blank'    //  

よく使われるのはaddEndpoint()、makeSource()、makeTarget()で、それぞれ端点を追加し、始点、終点を設定するために使用されます.
4、重ね合わせ
線の上に設定された矢印、ラベル、またはカスタムコンテンツ(ドロップダウンメニューなど)
ラベル:

var c = jsPlumb.connect({
  source:"d1", 
  target:"d2", 
  overlays:[
    [ "Label", {label:"FOO", id:"label"}]
  ] 
});

カスタムドロップダウン:

var conn = jsPlumb.connect({
  source:"d1",
  target:"d2",
  paintStyle:{
    stroke:"red",
    strokeWidth:3
  },
  overlays:[
    ["Custom", {
      create:function(component) {
        return $("foobar");                
      },
      location:0.7,
      id:"customOverlay"
    }]
  ]
});

5、要素ドラッグ
インスタンスオブジェクトにdraggableメソッドを使用すると、

myInstanceOfJsPlumb.draggable("elementId");      

領域内の要素の設定をドラッグ可能にする

jsPlumb.draggable("someElement", {
   containment:true
});

 
 
次の例を示します.

 

export default {
	data(){
		return {
			jsPlumb: null,
			list1:[{name:'XX',nodeId:'x'},{name:'YY',nodeId:'y'},{name:'ZZ',nodeId:'z'}],
			list2:[{name:'AA',nodeId:'a'},{name:'BB',nodeId:'b'},{name:'CC',nodeId:'c'}],
			connlist:[{sourceNodeId:'x',targetNodeId:'a'},{sourceNodeId:'y',targetNodeId:'b'},{sourceNodeId:'z',targetNodeId:'c'}]
		}
	},
	created() {
		this.jsPlumb = this.$jsPlumb.getInstance({
			Container:"container",   //   id
			EndpointStyle: { radius: 4, fill: "#acd"},  //    
			PaintStyle: { stroke: '#fafafa',strokeWidth:4},//     ，  8px    #456
			HoverPaintStyle: { stroke: '#1E90FF' }, //            null
			EndpointHoverStyle: { fill: '#F00', radius:6 }, //       
			ConnectionOverlays:[                 
				["Arrow",{
					location:1,
					paintStyle: {
						stroke: '#00688B',
						fill: '#00688B',
					}
				}]
			],
			Connector:["Straight",{gap:1}],     //            ：  ，   
			DrapOptions:{cursor:"crosshair",zIndex:2000}
		});
	},
	mounted() {
		let ins = this.jsPlumb,
			allConnection = ins.getAllConnections();
		ins.batch(() => {
			this.initAll();
			this.connectionAll();
		});
		this.switchContainer(true,true,false);
	},
	methods:{
		initAll () {
			let rl = this.list1;
			for (let i = 0; i < rl.length; i++) {
				this.init(rl[i].nodeId)
			}
			let rl2 = this.list2;
			for (let i = 0; i < rl2.length; i++) {
				this.init(rl2[i].nodeId)
			}
		},
		//            、  
		init (id) {
			let ins = this.jsPlumb,
					elem = document.getElementById(id);
			ins.makeSource(elem,{
				anchor: ["Perimeter", {anchorCount:200, shape:"Rectangle"}],
				allowLoopback: false,
				maxConnections: 1
			});
			ins.makeTarget(elem,{
				anchor: ["Perimeter", {anchorCount:200, shape:"Rectangle"}],
				allowLoopback: false,
				maxConnections: 1
			});
			ins.draggable(elem,{
				containment: true
			});
		},
		connectionAll () {
			let ins = this.jsPlumb;
			ins.ready(() => {
				for (let i = 0; i < this.connlist.length; i++) {
					let conn = this.connlist[i],
							connection = ins.connect({
								source:conn.sourceNodeId,
								target:conn.targetNodeId
							});
					connection.setPaintStyle({stroke:"#fafafa",strokeWidth:4})
				}
			})
		},
		switchContainer (target,source,draggable) {
			let elem = document.getElementsByName("cell"),
				  ins = this.jsPlumb;
			ins.setSourceEnabled(elem,source);
			ins.setTargetEnabled(elem,target);
			ins.setDraggable(elem,draggable);
		},
	}
}

 

jsPlumbにはbeforeDrop,connection,connectionDetached,connectionMovedなどいくつかのイベントがあり,それぞれ接続またはクリック前後にトリガーされ,接続修正の情報を保存するにはmountedでインスタンス化オブジェクトにイベントをバインドすることができる.
書き方:

jsPlumb.bind('connect',(info) =>{
   console.log(info)
   // info    connection，sourceId ，targetId     
})

接続の確立
接続解除
ConnectionMoved既存の接続元またはターゲットを新しい場所にドラッグ
クリック
dbclickダブルクリック
エンドポイントクリック
endpointDbClick端点をダブルクリック
contextmenuコンポーネントを右クリック
beforeDropが接続を完了する前に//バインド可能なイベントソースとターゲットが同じアウトにならないようにする

  .bind('beforeDrop', function (conn) {
      if (conn.sourceId === conn.targetId) {
        return false
      } else {
        return true
      }
    })

beforeDetach分離前