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

<!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. linux下set命令的参数及用法

    linux  set 命令 功能说明:设置shell. 语 法:set [+-abCdefhHklmnpPtuvx] 补充说明:用set 命令可以设置各种shell选项或者列 出shell变量.单个选 ...

  2. gtftools软件简单介绍(我自己不建议用，因为我发现不好用)

    1)背景 生物信息学研究经常涉及计算或提取基因的各种特征,如基因ID作图,GC含量计算和不同类型的基因长度,通过操纵基因模型,这些模型通常以GTF格式注释,可从ENSEMBL或GENCODE数据库获得 ...

  3. afinal框架下 ViewInject的使用

    1.可以在BaseActivity界面onCreate 方法setContentView后加上该语句. initInjectedView(this); 2.@ViewInject(id=R.id.v_ ...

  4. SharePoint 2010 图表控件

    需求: 统计每周的事件创建数量及关闭数量 以折线的形式显示 一张图表显示两条折线 知识点: 图表控件的使用 外部内容类型 数据库(sql)view(数据源) 结果:

  5. Easyui-datagrid显示时间的格式化代码

    {field: 'Time', title: '时间', formatter: function (value, row, index) { var date = new Date(value); v ...

  6. java小知识点简单回顾

    1.java的数据类型分为两种:简单类型和引用类型(数组.类以及接口).注意,java没有指针的说法,只有引用.简单类型的变量被声明时,存储空间也同时被分配:而引用类型声明变量(对象)时,仅仅为其分配 ...

  7. np.identity()

    二.np.identity()这个函数和之前的区别在于,这个只能创建方阵,也就是N=M 函数的原型:np.identity(n,dtype=None) 参数:n,int型表示的是输出的矩阵的行数和列数 ...

  8. 安装使用phpStudy在本机配置php运行环境

    前言: php开发的初学者,强烈推荐使用phpStudy集成环境,一方面这个的确很好用(本人电脑安装了jspStudy,可以同时调试php和jsp),另一方面呢,虽然本人是技术控,但对这些繁杂的安装部 ...

  9. 3sum, 3sum closest

    ［抄题］: Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find ...

  10. 44-python-三维画图

    https://www.cnblogs.com/xingshansi/p/6777945.html python绘制三维图   作者:桂. 时间:2017-04-27  23:24:55 链接:htt ...