jsplumb+dragable+vue(二)

基於vue的jsplumb，支持拖拽生成節點，節點雙擊展現更多信息，節點連線，刪除節點，刪除連線，重繪鏈接圖，當前頁面刷新鏈接圖，根據json畫鏈接圖等功能

本章主要講 刪除節點和連線 根據數據繪製鏈接圖

刪除節點

生成元素以後就給元素綁定雙擊事件，首先在jsPlumb中刪除此節點的全部端點，而後在html中刪掉此元素

jsPlumb.removeAllEndpoints(id);//刪除節點的上下左右全部的
   var parentDOM = $(this).parent().remove();

刪除連線

須要綁定在jsplumb上

jsPlumb.bind("dblclick", function(conn, originalEvent) {
   jsPlumb.detach(conn);//刪除連線
 }

根據數據繪製

數據就是上一章保存的數據
1.遍歷裏面的節點 而後append頁面中
2.給每一個節點加上下左右四個端點
3.遍歷連線，而後用jsplumb的connect連線

jsPlumb.connect({ source: PageSourceId, target: PageTargetId }, con);
 //PageSourceId開始節點的id PageTargetId結束節點的id  coo就是上一章鏈接線的配置