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...