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就是上一章链接线的配置