jsplumb+dragable+vue(一)

Imfan 發布于2019-08-02 16:03 / 429人閱讀

摘要：基于的，支持拖拽生成節點，節點雙擊展示更多信息，節點連線，刪除節點，刪除連線，重繪連接圖，當前頁面刷新連接圖，根據畫連接圖等功能本章主要講拖拽生成節點獲取鏈接圖的信息引入需要的文件因為要用所以引入了畫連接圖用因為用的所以這樣引入拖

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

GPU云服務器云服務器 dragable jsplumb jsplumb庫使用 Vue_Vue

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54577.html

jsplumb+dragable+vue(一)

摘要：基于的，支持拖拽生成節點，節點雙擊展示更多信息，節點連線，刪除節點，刪除連線，重繪連接圖，當前頁面刷新連接圖，根據畫連接圖等功能本章主要講拖拽生成節點獲取鏈接圖的信息引入需要的文件因為要用所以引入了畫連接圖用因為用的所以這樣引入拖基于vue的jsplumb，支持拖拽生成節點，節點雙擊展示更多信息，節點連線，刪除節點，刪除連線，重繪連接圖，當前頁面刷新連接圖，根據json畫連接圖等功能...

shadowbook 2019-08-23 11:43 評論0 收藏0
在vue項目中jsPlumb制作流程圖，拖拽復制使用 jquery 和 jquery UI

摘要：用做流程圖的項目，有一項功能是要從左側的菜單欄拖動項目到右側的面板上。參考了一些博客和，決定使用中的和功能。這是早期用jsPlumb做流程圖走的一個坑，使用jquery來制作流程圖，最近換成了用go.js來制作流程圖后，可以使用go.js中自帶的方法來制作拖拽效果，就不再使用jquery了。用jsPlumb做流程圖的項目，有一項功能是要從左側的菜單欄拖動項目到右側的面板上。參考了一...

marser 2019-08-23 13:53 評論0 收藏0
jsPlumb（1） - 開始使用

摘要：社區版本為開發者在他們的網頁上提供可視化的元素連接。在現代的瀏覽器使用，在和以下版本使用。建議用戶自己設置。到目前為止，一個在每個終點都有，在中間有一個標簽，添加四個元素，實際添加的元素取決于渲染器使用的是還是。 jsPlumb jsPlumb社區版本為開發者在他們的網頁上提供可視化的元素連接。在現代的瀏覽器使用SVG，在IE8和以下版本使用VML。 jsPlumb沒有額外的依賴。 ...

LoftySoul 2019-08-21 10:42 評論0 收藏0
記一次繪圖框架技術選型: jsPlumb VS mxGraph

摘要：公司項目需要用到繪圖框架，繪圖部分以前是另一位同事負責，用的是框架。基于以上提及到的種種原因，上年年末我做起了技術調研，希望能找到一個合適我們項目的繪圖框架。兼容性問題項目對瀏覽器兼容性比較寬松，瀏覽器兼容性問題不在考慮范圍之內。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

longmon 2019-08-23 15:36 評論0 收藏0
記一次繪圖框架技術選型: jsPlumb VS mxGraph

摘要：公司項目需要用到繪圖框架，繪圖部分以前是另一位同事負責，用的是框架。基于以上提及到的種種原因，上年年末我做起了技術調研，希望能找到一個合適我們項目的繪圖框架。兼容性問題項目對瀏覽器兼容性比較寬松，瀏覽器兼容性問題不在考慮范圍之內。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

channg 2019-08-02 14:23 評論0 收藏0