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 的状态改变可以自 ...
随机推荐
- jmeter模拟spike尖峰测
jmeter模拟spike尖峰测试 概述 尖峰测试(Spike testing)在性能测试中属于压力测试的一个子集.指的是在某一瞬间或者多个频次下用户数和压力陡然增加的场景. 为了验证我们的网站在访问 ...
- 2 Vue.js基础
1 简易计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 取消a或input标签聚焦后出现虚线框
1:在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框. <a href="#" onfocus="this.blur();&qu ...
- .net日志的用法
public class Logs { private static Logger logger = LogManager.GetCurrentClassLogger(); //初始化日志类 /// ...
- [Python3 练习] 005 汉诺塔1 递归解法
题目:汉诺塔 I (1) 描述 传说,在世界中心贝拿勒斯(在印度北部)的圣庙外有左中右三根足够长的柱子(塔) 左边柱子上套着 64 片金片,金片按"上小下大"排,其余两根是空柱子 ...
- 基于Filter实现Gzip数据压缩
在web开发中,当服务器端向客户端返回的数据量比较大时,我们可以通过Gzip对数据进行压缩处理 注意:如果小数据量进行压缩,压缩后的数据可能比原始数据还大:所以response返回数据量比较小时不推荐 ...
- java_第一年_JavaWeb(12)
SimpleTag标签 定义了五个方法:setJspContext.setJspBody.setParent和getParent以及最重要的doTag方法(完成了所有的业务逻辑): setJspCon ...
- [常用类]StringBuffer 类,以及 StringBuilder 类
线程安全,可变的字符序列. 字符串缓冲区就像一个String ,但可以修改. 在任何时间点,它包含一些特定的字符序列,但可以通过某些方法调用来更改序列的长度和内容. 字符串缓冲区可以安全地被多个线程使 ...
- django 开发中数据库做过什么优化??
1.设计表时,尽量少使用外键,因为外键约束会影响插入和删除性能: 2.使用缓存,减少对数据库的访问: 3.在 orm 框架下设置表时,能用 varchar 确定字段长度时,就别用 text: 4.可以 ...
- python RE表达式规则剩余规则
前面我学习了 ’.‘ '^' '$' '*' '+' '?' 基本针对单个字符的,学习python 表达式规则剩余规则. 1,{m} 匹配前一个字符m次 2,{n,.m} 匹配前一个字符n到m次 3 ...