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

<!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. vmadm命令

    VMADM(1M)VMADM(1M) 名称 vmadm - 管理SmartOS虚拟机 概要 / usr / vm / sbin / vmadm <command> [-d] [-v] [特 ...

  2. C++ volatile

    volatile的位置与const相同——都是作为类型的附加修饰符 使用volatile的主要目的是提示编译器该对象的值可能在编辑器未监测的情况下被改变,因此编译器不能武断地对引用这些对象的代码作优化 ...

  3. form表单的默认提交行为

    一 如果<form></form>表单中只有一个<input type="text"/>,则使文本框获取焦点,并单击回车,form会自动提交. ...

  4. 乱序字符串anagrams

    ［抄题］: 给出一个字符串数组S,找到其中所有的乱序字符串(Anagram).如果一个字符串是乱序字符串,那么他存在一个字母集合相同,但顺序不同的字符串也在S中. 对于字符串数组 ["lin ...

  5. linux 版本号的查看

    1.# uname -a   (Linux查看版本当前操作系统内核信息)   Linux localhost.localdomain 2.4.20-8 #1 Thu Mar 13 17:54:28 E ...

  6. 简单的几个Boost定时器

    boost的asio库里有几个定时的器,老的有 deadline_timer , 还有三个可配合 C++11 的 chrono 使用的 high_resolution_timer  . steady_ ...

  7. winform弹出文件和目录选择框

    目录选择: FolderBrowserDialog dialog = new FolderBrowserDialog(); dialog.Description = "请选择文件路径&quo ...

  8. Linux readelf命令

    一.简介 readelf用来显示一个或者多个elf格式的目标文件的信息,可以通过它的选项来控制显示哪些信息.这里的elf-file(s)就表示那些被检查的文件.可以支持32位,64位的elf格式文件, ...

  9. Linux系统 SecureCRT SecureFX 注册破解方法

    1.创建脚本文件crack-binary.sh,内容如下: #!/bin/sh        cd $1  cat SecureCRT  | od -A n -v -t x1 | tr -d ' \n ...

  10. RNA-seq要做几次生物学重复？找出来的100%都是真正的应答基因

    尹师妹:“哈师兄,做验证实验好辛苦,老板让我提高筛选差异基因的条件,尽量降低假阳性,我该怎么筛?” 小哈打开Evernote,给尹师妹看张表: “瞧见那个100%了吗?30 million mappe ...