这就是一个给元素画连接线的工具。

<!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学习笔记的更多相关文章

  1. jsPlumb 学习笔记

    介绍 使用svg完成画图,四个概念: anchor: endpoint在的位置,可通过name访问 endpoint:connection的一端节点,通过addPoint makeSource, co ...

  2. 前端流程图jsplumb学习笔记

    1.这篇博客很好,另外两个是官网文档 http://www.cnblogs.com/leomYili/p/6346526.html https://jsplumbtoolkit.com/communi ...

  3. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  7. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  8. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. oracle Hash Join及三种连接方式

    在Oracle中,确定连接操作类型是执行计划生成的重要方面.各种连接操作类型代表着不同的连接操作算法,不同的连接操作类型也适应于不同的数据量和数据分布情况. 无论是Nest Loop Join(嵌套循 ...

  2. flush(), clear(), save()的简单解释

    hibernate最新发布包的javadoc里对这三个方法的解释是: clear() :Completely clear the session.清空session,该清空操作只对于要保存的.删除的和 ...

  3. SQLserver和oracle中对应的数据类型

  4. 信息: The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path:

    问题信息详细: 信息: The APR based Apache Tomcat Native library which allows optimal performance in productio ...

  5. tf.random_normal()

    tf.random_normal()函数用于从服从指定正太分布的数值中取出指定个数的值. tf.random_normal(shape, mean=0.0, stddev=1.0, dtype=tf. ...

  6. KO ------- 表中字段名和实体类属性名不一致

    -----------------------siwuxie095 KO ------- 表中字段名和实体类属性名不一致 如果数据库表中的字段名和实体类的属性名不一致,那么在查询时, 相应字段的结果就 ...

  7. dede数据库内容替换，去掉文章内容中的img标签

    1.织梦已经给我们准备好了数据库内容替换工具,在采集->批量维护->数据库内容替换 2.织梦的文章内容一般在放在dede_addonarticle表body字段中. (1).选择好数据表和 ...

  8. MySql删除表、数据

    程度从强到弱 1.drop  table tb        drop将表格直接删除,没有办法找回 2.truncate (table) tb       删除表中的所有数据,不能与where一起使用 ...

  9. ldd "symbol lookup error"问题解决

    http://www.linuxquestions.org/questions/slackware-14/symbol-lookup-error-usr-lib-libgtk-x11-2-0-so-0 ...

  10. Mina 系列(四)之KeepAliveFilter -- 心跳检测

    Mina 系列(四)之KeepAliveFilter -- 心跳检测 摘要: 心跳协议,对基于CS模式的系统开发来说是一种比较常见与有效的连接检测方式,最近在用MINA框架,原本自己写了一个心跳协议实 ...