基于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. vue组件兄弟间通信

    四.兄弟组件间通信(event) 借助于一个公共的Vue的实例对象,不同的组件可以通过该对象完成事件的绑定和触发 var bus = new Vue(); bus.$emit()bus.$on() 熊 ...

  2. SpringBoot内嵌数据库的使用(H2)

    配置数据源(DataSource) Java的javax.sql.DataSource接口提供了一个标准的使用数据库连接的方法. 传统做法是, 一个DataSource使用一个URL以及相应的证书去构 ...

  3. bash shell for循环

    1 同c一样用四个空格进行缩进 2 每行一条语句,不用分号 3 不用大括号标识代码块,但是要用do/done来标识代码块 4 用双小括号,类似于c的for进行编码 for ((i=1; i<=1 ...

  4. vue自定义组件(通过Vue.use()来使用)即install的使用

    在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个loading.vue文件 // Cmponent.vue <te ...

  5. Django之模板(T)

    一, 常用语法 Django模板中只需要记两种特殊符号: {{ }}和 {% %} {{ }}表示变量,在模板渲染的时候替换成值,{% %}表示逻辑相关的操作. 一, 变量 语法: {{ 变量名 }} ...

  6. 基于Java的大整数运算的实现(加法,减法,乘法)学习笔记

    大整数,顾名思义就是特别大的整数. 一台64位的机器最大能表示的数字是2的64次方减一: 18446744073709551615 java语言中所能表示的整数(int)最小为-2147483648 ...

  7. 问题 E: Jack的A+B

    问题 E: Jack的A+B 时间限制: 1 Sec  内存限制: 128 MB提交: 1996  解决: 601[提交] [状态] [命题人:jsu_admin] 题目描述 现在有整数a,b,请按西 ...

  8. 放弃等待,故障到来:少一个 await 引发的 tcp 连接泄漏故障

    更新:后来升级至 .NET Core 2.2 Preview 3 ,并将 System.Net.Http 升级至 4.3.4 之后没出现这个问题,问题与 https://github.com/dotn ...

  9. .NET Reactor使用教程(加密源代码示例)

    更多:https://www.cnblogs.com/PiaoMiaoGongZi/category/1120300.html 1.打开 Eziriz .NET Reactor,主界面如图1所示: 图 ...

  10. python基础--3 列表

    #list类#li是list类的一个对象li=[11,22,33,22,44] #参数#在原来值最后进行整个作为元素追加 # li.append((11,22,33))#对列表本身进行操作,appen ...