jsplumb+dragable+vue(二)

2024年4月9日 216次阅读 来源: NANA

基于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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞