jsplumb+dragable+vue(一)
基于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(一)的更多相关文章
- 2018No-java面试知识
1.框架 1. springboot比spring的优点? 2. Springmvc的基本流程? 3. 微服务之间调用不会慢吗? 4. 大图片和大数据库怎么存储? 5. spring事物?四大特征, ...
- vue内引入jsPlumb流程控制器(一)
1. npm i jsplumb --save 注:jsplumb要全小写 2. 在main.js内 加: import jsPlumb from 'jsplumb' Vue.prototype.$j ...
- 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx
一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...
- 基于Vue实现可以拖拽的树形表格(原创)
因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插 ...
- vue 使用gojs绘制简单的流程图
在vue项目中需要展示工作流进度,可以使用的流程图插件很多 flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG创建Flow Chart ...
- jsplumb 流程图,常用功能配置记录
前言: jsplumb 有2个版本一个Toolkit Edition(付费版),另外一个就是Community Edition(社区版本).Toolkit Edition版本功能集成的比较丰富,社区版 ...
- JsPlumb在react的使用方法及介绍
JsPlumb在react的使用方法及介绍 一.相关资料来源: 1.https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_ ...
- ABP+WorkflowCore+jsplumb实现工作流
前言 ABP目前已经是很成熟的开发框架了,它提供了很多我们日常开发所必须的功能,并且很方便扩展,让我们能更专注于业务的开发.但是ABP官方并没有给我们实现工作流. 在.net core环境下的开源工作 ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
随机推荐
- vue组件兄弟间通信
四.兄弟组件间通信(event) 借助于一个公共的Vue的实例对象,不同的组件可以通过该对象完成事件的绑定和触发 var bus = new Vue(); bus.$emit()bus.$on() 熊 ...
- SpringBoot内嵌数据库的使用(H2)
配置数据源(DataSource) Java的javax.sql.DataSource接口提供了一个标准的使用数据库连接的方法. 传统做法是, 一个DataSource使用一个URL以及相应的证书去构 ...
- bash shell for循环
1 同c一样用四个空格进行缩进 2 每行一条语句,不用分号 3 不用大括号标识代码块,但是要用do/done来标识代码块 4 用双小括号,类似于c的for进行编码 for ((i=1; i<=1 ...
- vue自定义组件(通过Vue.use()来使用)即install的使用
在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个loading.vue文件 // Cmponent.vue <te ...
- Django之模板(T)
一, 常用语法 Django模板中只需要记两种特殊符号: {{ }}和 {% %} {{ }}表示变量,在模板渲染的时候替换成值,{% %}表示逻辑相关的操作. 一, 变量 语法: {{ 变量名 }} ...
- 基于Java的大整数运算的实现(加法,减法,乘法)学习笔记
大整数,顾名思义就是特别大的整数. 一台64位的机器最大能表示的数字是2的64次方减一: 18446744073709551615 java语言中所能表示的整数(int)最小为-2147483648 ...
- 问题 E: Jack的A+B
问题 E: Jack的A+B 时间限制: 1 Sec 内存限制: 128 MB提交: 1996 解决: 601[提交] [状态] [命题人:jsu_admin] 题目描述 现在有整数a,b,请按西 ...
- 放弃等待,故障到来:少一个 await 引发的 tcp 连接泄漏故障
更新:后来升级至 .NET Core 2.2 Preview 3 ,并将 System.Net.Http 升级至 4.3.4 之后没出现这个问题,问题与 https://github.com/dotn ...
- .NET Reactor使用教程(加密源代码示例)
更多:https://www.cnblogs.com/PiaoMiaoGongZi/category/1120300.html 1.打开 Eziriz .NET Reactor,主界面如图1所示: 图 ...
- python基础--3 列表
#list类#li是list类的一个对象li=[11,22,33,22,44] #参数#在原来值最后进行整个作为元素追加 # li.append((11,22,33))#对列表本身进行操作,appen ...