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这样引入

---

拖拽

让节点能够拖拽
须要用的jq,首先获取全部的节点，而后给他们设置draggable方法这样就能够拖拽了 具体的要设置拖拽节点的类名之类的能够网上查一下

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" }); //保证拖动不跨界

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

---

获取链接图的信息

list = jsPlumb.getAllConnections();//获取全部连接线的信息
list里面就是连接线信息 而后本身遍历须要的东西
节点的信息遍历元素 取出须要的信息

---

初期学习的时候参考的文章：

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