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








    原文作者:NANA
    原文地址: https://segmentfault.com/a/1190000016267424
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞