jsplumb+dragable+vue(三)

最新推荐文章于 2024-03-19 09:55:44 发布

weixin_34000916

最新推荐文章于 2024-03-19 09:55:44 发布

阅读量659

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016267702

版权

总结用到的jsplumb方法

jsPlumb.connect({ source: PageSourceId, target: PageTargetId }, con);连接两个节点
jsPlumb.getAllConnections();获取连接线信息
jsPlumb.detachEveryConnection();删除所有的连接
jsPlumb.removeAllEndpoints(id);删除节点的所有端点
jsPlumb.detach(contentid);删除连接线
jsPlumb.addEndpoint(id， { anchors: "BottomCenter" }, that.circlecss)添加端点
jsPlumb.draggable(id);允许节点拖拽

以上

注意因为vue是单页面可能重绘时候之前的信息还有所保留所以最好初始化时候获取连接线，如果大于0则先删除所有连接线再重绘图

  if(jsPlumb.getAllConnections().hasOwnProperty('jsPlumb_DefaultScope')) {
     
       if( jsPlumb.getAllConnections().jsPlumb_DefaultScope.length >0) {
         
         jsPlumb.detachEveryConnection()
     
         };
    }

完结撒花！！！