jsplumb+dragable+vue(一)

Imfan 发布于2019-08-02 16:03 / 409人阅读

摘要：基于的，支持拖拽生成节点，节点双击展示更多信息，节点连线，删除节点，删除连线，重绘连接图，当前页面刷新连接图，根据画连接图等功能本章主要讲拖拽生成节点获取链接图的信息引入需要的文件因为要用所以引入了画连接图用因为用的所以这样引入拖

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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