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

jsplumb+dragable+vue(一)的更多相关文章

  1. 2018No-java面试知识

    1.框架 1. springboot比spring的优点? 2. Springmvc的基本流程? 3. 微服务之间调用不会慢吗? 4. 大图片和大数据库怎么存储? 5. spring事物?四大特征, ...

  2. vue内引入jsPlumb流程控制器(一)

    1. npm i jsplumb --save 注:jsplumb要全小写 2. 在main.js内 加: import jsPlumb from 'jsplumb' Vue.prototype.$j ...

  3. 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  4. 基于Vue实现可以拖拽的树形表格(原创)

    因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插 ...

  5. vue 使用gojs绘制简单的流程图

    在vue项目中需要展示工作流进度,可以使用的流程图插件很多 flowchart.js  http://adrai.github.io/flowchart.js/ , 基于SVG创建Flow Chart ...

  6. jsplumb 流程图,常用功能配置记录

    前言: jsplumb 有2个版本一个Toolkit Edition(付费版),另外一个就是Community Edition(社区版本).Toolkit Edition版本功能集成的比较丰富,社区版 ...

  7. JsPlumb在react的使用方法及介绍

    JsPlumb在react的使用方法及介绍 一.相关资料来源: 1.https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_ ...

  8. ABP+WorkflowCore+jsplumb实现工作流

    前言 ABP目前已经是很成熟的开发框架了,它提供了很多我们日常开发所必须的功能,并且很方便扩展,让我们能更专注于业务的开发.但是ABP官方并没有给我们实现工作流. 在.net core环境下的开源工作 ...

  9. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

随机推荐

  1. jmeter模拟spike尖峰测

    jmeter模拟spike尖峰测试 概述 尖峰测试(Spike testing)在性能测试中属于压力测试的一个子集.指的是在某一瞬间或者多个频次下用户数和压力陡然增加的场景. 为了验证我们的网站在访问 ...

  2. 2 Vue.js基础

    1 简易计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. 取消a或input标签聚焦后出现虚线框

    1:在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框. <a href="#" onfocus="this.blur();&qu ...

  4. .net日志的用法

    public class Logs { private static Logger logger = LogManager.GetCurrentClassLogger(); //初始化日志类 /// ...

  5. [Python3 练习] 005 汉诺塔1 递归解法

    题目:汉诺塔 I (1) 描述 传说,在世界中心贝拿勒斯(在印度北部)的圣庙外有左中右三根足够长的柱子(塔) 左边柱子上套着 64 片金片,金片按"上小下大"排,其余两根是空柱子 ...

  6. 基于Filter实现Gzip数据压缩

    在web开发中,当服务器端向客户端返回的数据量比较大时,我们可以通过Gzip对数据进行压缩处理 注意:如果小数据量进行压缩,压缩后的数据可能比原始数据还大:所以response返回数据量比较小时不推荐 ...

  7. java_第一年_JavaWeb(12)

    SimpleTag标签 定义了五个方法:setJspContext.setJspBody.setParent和getParent以及最重要的doTag方法(完成了所有的业务逻辑): setJspCon ...

  8. [常用类]StringBuffer 类,以及 StringBuilder 类

    线程安全,可变的字符序列. 字符串缓冲区就像一个String ,但可以修改. 在任何时间点,它包含一些特定的字符序列,但可以通过某些方法调用来更改序列的长度和内容. 字符串缓冲区可以安全地被多个线程使 ...

  9. django 开发中数据库做过什么优化??

    1.设计表时,尽量少使用外键,因为外键约束会影响插入和删除性能: 2.使用缓存,减少对数据库的访问: 3.在 orm 框架下设置表时,能用 varchar 确定字段长度时,就别用 text: 4.可以 ...

  10. python RE表达式规则剩余规则

    前面我学习了 ’.‘ '^' '$' '*' '+' '?'  基本针对单个字符的,学习python 表达式规则剩余规则. 1,{m} 匹配前一个字符m次 2,{n,.m} 匹配前一个字符n到m次 3 ...