jsplumb+dragable+vue(一)

基于vue的jsplumb,支撑拖拽天生节点,节点双击展现更多信息,节点连线,删除节点,删除连线,重绘衔接图,当前页面革新衔接图,依据json画衔接图等功能

本章主要讲 拖拽天生节点 猎取链接图的信息

引入须要的文件

jquery-ui 由于要用dragable 所以引入了jquery-ui.min.js
jquery-ui.min.css
jquery.jsPlumb-1.4.0-all.js 画衔接图用
import $ from ‘jquery’; 由于用的vue所以jquery如许引入

《jsplumb+dragable+vue(一)》

拖拽

让节点能够拖拽
须要用的jq,起首猎取一切的节点,然后给他们设置draggable要领如许就能够拖拽了 详细的要设置拖拽节点的类名之类的能够网上查一下

《jsplumb+dragable+vue(一)》

drop拖拽放开会触发这个要领
比方拖拽后须要用户输入新建节点的名字之类的

新建节点

拖拽以后要在拖拽的位置天生一个实在的节点 而且上下左右能够恣意发出衔接线
1.在拖拽的地区append一个div 设置它的id,款式之类的以及坐标(drop要领里能够拿到)
2.天生上下左右能够连线的点

     jsPlumb.addEndpoint(
      Id,//上一步天生的id
      { anchors: "BottomCenter" },//能够发出衔接线的位置 有TopCenter,BottomCenter,LeftCenter,RightCenter四个方位
      that.hollowCircle//衔接线的款式
    );

  jsPlumb.draggable(Id);//设置此节点能够拖拽
  $("#" + Id).draggable({ containment: "parent" }); //保证拖动不跨界


《jsplumb+dragable+vue(一)》

3.用以上能够画出节点 以后能够随意连线啦!!!

猎取衔接图的信息

list = jsPlumb.getAllConnections();//猎取一切链接线的信息
list内里就是链接线信息 然后本身遍历须要的东西
节点的信息遍历元素 掏出须要的信息

早期进修的时刻参考的文章:

https://www.cnblogs.com/mq003…
https://github.com/leinue/jQu…

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