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

<!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. drupal 7.1 doc

    https://www.drupal.org/docs/8/api/database-api/dynamic-queries/count-queries https://www.drupal.org/ ...

  2. mysql datetime与timestamp精确到毫秒的问题

    CREATE TABLE `tab1` (`tab1_id` VARCHAR(11) DEFAULT NULL,`create` TIMESTAMP(3) NULL DEFAULT NULL,`cre ...

  3. golang interface接口

    package main import "fmt" type Shaper interface { Area() float32 } type Square struct { si ...

  4. Error running : Address localhost:1099 is already in use

    运行报错: Error running  : Address localhost:1099 is already in use 解决方法: 打开任务管理器,将后台的java.exe进程都关掉,再次运行 ...

  5. 在Linux下配置jdk的环境变量

    jdk下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 在根目录新建s ...

  6. 整合Spring框架和Hibernate框架

    -------------------siwuxie095                                 整合 Spring 框架和 Hibernate 框架         1.导 ...

  7. 全排列12 · Permutations

    无重复 ［抄题］: Given a collection of numbers, return all possible permutations. For example,[1,2,3] have ...

  8. VS IIS 注册 以及IIS浏览提示无权限访问

    VS2008 IIS重新注册2008-11-21 9:06无法显示XML页--名称以无效字符开头2008-10-17 15:19无法显示XML页--名称以无效字符开头.iis处理资源时出错的解决办法2 ...

  9. [leetcode]115. Distinct Subsequences 计算不同子序列个数

    Given a string S and a string T, count the number of distinct subsequences of S which equals T. A su ...

  10. html注释快捷键

    1.选中需要注释的内容--->ctrl+shift+/ 2.取消注释--->ctrl+shift+\