jsPlumb学习笔记
2024-10-16 23:36:17
这就是一个给元素画连接线的工具。
<!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中都有,需要的动作,就是拖动。
最新文章
- 商业智能软件对比评测:FineBI和Tableau
- c# 保存数据到txt (追加)
- 1250 Super Fast Fourier Transform(湘潭邀请赛 暴力 思维)
- Unity小游戏制作 - 暗影随行
- django学习笔记
- js小效果-双色球
- 第三节 构造一个简单的Linux系统MenuOS——20135203齐岳
- SqlServer将没有log文件的数据库文件附加到服务器中
- Android 使用 Gmail 来发送邮件
- Mysql数据库备份和还原常用的命令
- rest和soap_笔记
- SpringMVC conflicts with existing, non-compatible bean definition of same name and class 的解决办法
- English - even though和even if用法解析
- SQL 2008 SP2 找不到SQL Server Engine
- flask 上传文件
- django ajax 及批量插入数据 分页器
- postgreSQL学习(二):pgsql的一些基础操作
- Angular记录(1)
- 【转载】http proxy原理
- awk分析mysql状态
热门文章
- js indexOf within Switch
- eclipse git 报 git: 401 Unauthorized
- SpringMVC 文件上传 MultipartFile
- 兼容多浏览器的html圆角特效
- mysqlbateis generator 当遇到tinyint 生成转化bool 解决方法
- 不同的路径12障碍物 &#183; Unique Paths12
- Tomcat:A cookie header was received[xxxxxx] that contained an invalid cookie. That cookie will be ignored.
- Django之常用命令以及问题汇总
- Kendo UI 的弹框
- php用get方式传json数据 变成null了