jsPlumb学习笔记
这就是一个给元素画连接线的工具。
<!DOCTYPE html>
<html>
<head>
<title>jsPlumb</title>
<style>
.item{
width:100px;
height:50px;
border:3px solid green;
position: absolute;
}
.item1{
left:400px;
top:100px;
}
.item2{
left:300px;
top:250px;
}
.item3{
left:500px;
top:250px;
}
.item4{
left:200px;
top:400px;
}
.item5{
left:400px;
top:400px;
}
.item6{
left:600px;
top:400px;
}
</style>
</head>
<body>
<div class='demo' id='demo'>
<div class='item item1' id='item1'>1</div>
<div class='item item2' id='item2'>2</div>
<div class='item item3' id='item3'>3</div>
<div class='item item4' id='item4'>4</div>
<div class='item item5' id='item5'>5</div>
<div class='item item6' id='item6'>6</div>
</div>
<script src="jquery-2.1.1.js"></script>
<script src="jquery-ui-1.9.2.js"></script>
<script src="jquery.jsPlumb-1.4.1-all.js"></script>
<script>
jsPlumb.ready(function(){
var color = '#222';
var instance = jsPlumb.getInstance({
//连线
Connector:['Bezier', {curviness:50}],
//拖动时的演示
DragOptions:{cursor:'pointer', zIndex:2000},
//连接线的样式
PaintStyle:{strokeStyle:'steelblue', lineWidth:3},
//连接点的样式
EndpointStyle:{radius:6, fillStyle:'#222'},
//hover时线样式
HoverPaintStyle:{strokeStyle:'green'},
//hover时点的样式
EndpointHoverStyle:{fillStyle:'red'},
Container:'demo' //Either an element id, a DOM element, or a selector from the underlying library
});
instance.doWhileSuspended(function(){
var arrowCommon = {foldback: .7, fillStyle: color, width: 14},
overlays = [
['Arrow', {location:.8}, arrowCommon],
// ['Arrow', {location:.3, direction:-1}, arrowCommon],
];
var windows = jsPlumb.getSelector('.item'); for(var i = 0; i<windows.length;i++){
instance.addEndpoint(windows[i], {
uuid:windows[i].getAttribute('id')+'-bottom',
anchor:'Bottom',
maxConnections:-1
});
instance.addEndpoint(windows[i], {
uuid:windows[i].getAttribute('id')+'-top',
anchor:'Top',
maxConnections:-1
});
}
//connect 函数
instance.connect({uuids:['item3-bottom','item6-top'], overlays:overlays, detachable:true, reattach:true});
instance.connect({uuids:['item1-bottom','item2-top'], overlays:overlays});
instance.connect({uuids:['item1-bottom','item3-top'], overlays:overlays});
instance.connect({uuids:['item2-bottom','item4-top'], overlays:overlays});
instance.connect({uuids:['item2-bottom','item5-top'], overlays:overlays});
//jquery ui里的draggable功能
instance.draggable(windows);
});
jsPlumb.fire('jsPlumbdemoLoaded', instance);
})
</script>
</body>
</html>
这是一个简单的小例子。是官网中一个demo的简化版，在学习了网上的教程之后，给官网的例子加了自己的注释。
给元素加连接点，给连接点加连接线，给连接线加各种装饰。需要的样式，canvas和SVG中都有，需要的动作，就是拖动。
jsPlumb学习笔记的更多相关文章
- jsPlumb 学习笔记
介绍 使用svg完成画图,四个概念: anchor: endpoint在的位置,可通过name访问 endpoint:connection的一端节点,通过addPoint makeSource, co ...
- 前端流程图jsplumb学习笔记
1.这篇博客很好,另外两个是官网文档 http://www.cnblogs.com/leomYili/p/6346526.html https://jsplumbtoolkit.com/communi ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
随机推荐
- 打地鼠Demo
using UnityEngine; using System.Collections; public enum MoleStates { NormalState,// 初始状态 UpState,// ...
- Python3 len()方法
Python3 len()方法 Python3 字符串 描述 Python len() 方法返回对象(字符.列表.元组等)长度或项目个数. 语法 len()方法语法: len( s ) 参数 s - ...
- 识别名人 · Find the Celebrity
［抄题］: 假设你和 n 个人在一个聚会中(标记为 0 到 n - 1),其中可能存在一个名人.名人的定义是所有其他 n - 1 人都认识他/她,但他/她不知道任何一个.现在你想要找出这个名人是谁或者 ...
- 创建和修改主键 (SQL)
添加主键, ALTER TABLE [表名:OrderInfo] Add PRIMARY KEY ([列名:ProductID, UserID...]) 多个列则是组合主键 删除主键, ALTER ...
- Oracle增加一列、修改一列数据类型
Oracle增加一列.修改一列数据类型: 添加一列: alter table A add( CFYJSNR varchar2(20)); 修改列: alter table A ren ...
- ssh的无密码登录
实现步骤如下: 1 生成一对公钥和私钥 $ ssh-keygen #以上命令等价于 ssh-keygen -t rsa #-t:指定密钥的类型,默认为SSH-2 的rsa类型; 运行上面的命令后,系统 ...
- python使用input()来接受字符串时一直报错“xxx is not defined”
报错信息: “Please input your guess: gussTraceback (most recent call last): File "coinGuessGame.py& ...
- 【hh】我胡汉三又回来了
hh 差不多半年没来机房了,高一的都已经碾压我100题了 开始得比较晚,估计比高一的早两三个月吧,停了这半年落下了不少. 但是没有关系啊,学OI纯粹是好玩嘛,一开始报名的时候根本不知道有联赛这回事(其 ...
- Nginx详解（正向代理、反向代理、负载均衡原理）
Nginx配置详解 nginx概述 nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IMAP.POP3.SMTP代理服务器:nginx可以作为一个HTTP服务器进行 ...
- 如何将网站部署到tomcat根目录下
更改前访问:http://192.168.1.2/baby 更改后访问:http://192.168.1.2/ 打开tomcat/conf/server.xml找到 <Host name=&qu ...