成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

jsplumb+dragable+vue(一)

shadowbook / 2347人閱讀

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

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

jquery-ui 因為要用dragable 所以引入了jquery-ui.min.js
jquery-ui.min.css
jquery.jsPlumb-1.4.0-all.js 畫連接圖用
import $ from "jquery"; 因為用的vue所以jquery這樣引入

拖拽

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

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

新建節(jié)點

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

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

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

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

獲取連接圖的信息

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97368.html

相關(guān)文章

  • jsplumb+dragable+vue(一)

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

    Imfan 評論0 收藏0

  • 在vue項目中jsPlumb制作流程圖，拖拽復(fù)制使用 jquery 和 jquery UI

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

    marser 評論0 收藏0

  • jsPlumb（1） - 開始使用

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

    LoftySoul 評論0 收藏0

  • 記一次繪圖框架技術(shù)選型: jsPlumb VS mxGraph

    摘要：公司項目需要用到繪圖框架，繪圖部分以前是另一位同事負(fù)責(zé)，用的是框架?；谝陨咸峒暗降姆N種原因，上年年末我做起了技術(shù)調(diào)研，希望能找到一個合適我們項目的繪圖框架。兼容性問題項目對瀏覽器兼容性比較寬松，瀏覽器兼容性問題不在考慮范圍之內(nèi)。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

    longmon 評論0 收藏0

  • 記一次繪圖框架技術(shù)選型: jsPlumb VS mxGraph

    摘要：公司項目需要用到繪圖框架，繪圖部分以前是另一位同事負(fù)責(zé)，用的是框架?；谝陨咸峒暗降姆N種原因，上年年末我做起了技術(shù)調(diào)研，希望能找到一個合適我們項目的繪圖框架。兼容性問題項目對瀏覽器兼容性比較寬松，瀏覽器兼容性問題不在考慮范圍之內(nèi)。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

    channg 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<