jsplumb+dragable+vue(一)

Imfan 發(fā)布于2019-08-02 16:03 / 438人閱讀

摘要：基于的，支持拖拽生成節(jié)點(diǎn)，節(jié)點(diǎn)雙擊展示更多信息，節(jié)點(diǎn)連線，刪除節(jié)點(diǎn)，刪除連線，重繪連接圖，當(dāng)前頁面刷新連接圖，根據(jù)畫連接圖等功能本章主要講拖拽生成節(jié)點(diǎn)獲取鏈接圖的信息引入需要的文件因?yàn)橐盟砸肓水嬤B接圖用因?yàn)橛玫乃赃@樣引入拖

基于vue的jsplumb，支持拖拽生成節(jié)點(diǎn)，節(jié)點(diǎn)雙擊展示更多信息，節(jié)點(diǎn)連線，刪除節(jié)點(diǎn)，刪除連線，重繪連接圖，當(dāng)前頁面刷新連接圖，根據(jù)json畫連接圖等功能 本章主要講拖拽生成節(jié)點(diǎn) 獲取鏈接圖的信息 引入需要的文件

jquery-ui 因?yàn)橐胐ragable 所以引入了jquery-ui.min.js
jquery-ui.min.css
jquery.jsPlumb-1.4.0-all.js 畫連接圖用
import $ from "jquery"; 因?yàn)橛玫膙ue所以jquery這樣引入

拖拽

讓節(jié)點(diǎn)可以拖拽
需要用的jq,首先獲取所有的節(jié)點(diǎn)，然后給他們設(shè)置draggable方法這樣就可以拖拽了具體的要設(shè)置拖拽節(jié)點(diǎn)的類名之類的可以網(wǎng)上查一下

drop拖拽放開會觸發(fā)這個(gè)方法
比如拖拽后需要用戶輸入新建節(jié)點(diǎn)的名字之類的

新建節(jié)點(diǎn)

拖拽之后要在拖拽的位置生成一個(gè)真實(shí)的節(jié)點(diǎn) 并且上下左右可以任意發(fā)出連接線
1.在拖拽的區(qū)域append一個(gè)div 設(shè)置它的id,樣式之類的以及坐標(biāo)（drop方法里可以拿到）
2.生成上下左右可以連線的點(diǎn)

     jsPlumb.addEndpoint(
      Id,//上一步生成的id
      { anchors: "BottomCenter" },//可以發(fā)出連接線的位置 有TopCenter，BottomCenter，LeftCenter，RightCenter四個(gè)方位
      that.hollowCircle//連接線的樣式
    );

  jsPlumb.draggable(Id);//設(shè)置此節(jié)點(diǎn)可以拖拽
  $("#" + Id).draggable({ containment: "parent" }); //保證拖動不跨界

3.用以上可以畫出節(jié)點(diǎn) 之后可以隨便連線啦！！！

獲取連接圖的信息

list = jsPlumb.getAllConnections();//獲取所有鏈接線的信息
list里面就是鏈接線信息然后自己遍歷需要的東西
節(jié)點(diǎn)的信息遍歷元素取出需要的信息

初期學(xué)習(xí)的時(shí)候參考的文章：

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