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

<!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. spark cache table

    http://www.07net01.com/2015/11/961118.html http://www.cnblogs.com/charlotte77/p/5468968.html 文本读入和写出 ...

  2. HTML 求阶乘之和

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CentOS7系列搭建Openvpn

    环境:CentOS Linux release 7.3.1611 (Core) 查看os版本命令:[root@openvpn ~]# cat /etc/redhat-release 命令记录如下: y ...

  4. spring 在web容器启动时执行初始化方法

    开发框架:spingMVC+myBatis 解决方案:给web容器添加一个Listener类,在容器启动的时候执行Listener的“初始化”方法,在这个初始化方法中执行查询数据库的所有操作,然后将数 ...

  5. What is API Level?

    [What is API Level?] 参考:http://android.xsoftlab.net/guide/topics/manifest/uses-sdk-element.html#ApiL ...

  6. Express 应用生成器

    [Express 应用生成器] 通过应用生成器工具 express 可以快速创建一个应用的骨架. 通过如下命令安装,-g意味着安装在全局目录下: 下面的示例就是在当前工作目录下创建一个命名为 myap ...

  7. 重新认识trim，ltrim，rtrim，trailing和leading。

    trim经常用来去除一个字符串的空格,select trim(' dhajkjwa ') from dual; 在上面的语句中,trim的前面也可以加r或者l,表示去掉前面或者后面的空格,r和l代表左 ...

  8. 超薄二维Mo2C晶体

    记者今天从中国科学院金属研究所获悉,该所沈阳材料科学国家(联合)实验室先进炭材料研究部任文才研究组在大尺寸高质量二维过渡族金属碳化物晶体的制备与物性研究方面取得了重要突破.相关成果日前在<自然— ...

  9. MonkeyRunner原理初步--Android自动化测试学习历程

    章节:自动化基础篇——MonkeyRunner原理初步 主要讲解内容及笔记: 一.理论知识和脚本演示 最佳方式是上官网文档去查看monkeyrunner的介绍,官网上不去,就找了一个本地的androi ...

  10. Navicat Premium11连接Oracle出现ORA-28547：connection to server failed

    环境描述:本地Oracle正常安装,中途没有出现任何异常.确保Oracle的主要服务都启动了.1.OracleServiceORCL2.OracleOraDb11g_home1TNSListener ...